/* ---- Self-hosted fonts (vendored from Google Fonts, latin subsets) ---- */
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/Spectral-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/Spectral-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/Spectral-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../fonts/DMMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ---- Palette (color schemes rewrite these vars at runtime) ---- */
:root {
    --bg: #16110D;
    --panel: #1B1511;
    --soft: #241D17;
    --line: #332921;
    --ink: #ECE3D2;
    --muted: #998A75;
    --faint: #4A3E32;
    --accent: #E0A458;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
.ls-app{
  min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:'Spectral',Georgia,serif; position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.ls-lamp{
  position:fixed; top:-22vh; left:50%; transform:translateX(-50%);
  width:130vw; height:80vh; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(50% 55% at 50% 35%, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 7%, transparent) 45%, transparent 72%);
  transition:opacity 1.1s ease;
}
.ls-lamp.is-on{ opacity:.9; }

/* ---- Welcome splash ---- */
.ls-splash{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition:opacity .7s ease;
}
.ls-splash.is-done{ opacity:0; pointer-events:none; }
.ls-splash-glow{
  position:absolute; left:50%; top:50%; width:140vmin; height:140vmin;
  transform:translate(-50%,-56%); pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 45%, transparent 72%);
  animation:splash-flicker 1.5s ease-out both;
}
.ls-splash-inner{ position:relative; padding:0 28px; }
.ls-splash-logo{
  font-family:'Instrument Serif',serif; font-size:clamp(46px,9vw,76px);
  letter-spacing:.5px; color:var(--ink); line-height:1.1;
  animation:splash-rise 1s cubic-bezier(.22,1,.36,1) .4s both;
}
.ls-splash-logo span{ color:var(--accent); }
.ls-splash-blurb{
  font-family:'Spectral',serif; font-style:italic; font-weight:300;
  font-size:clamp(15px,2.4vw,18px); line-height:1.7; color:var(--muted);
  max-width:34em; margin:16px auto 0;
  animation:splash-rise 1s cubic-bezier(.22,1,.36,1) .85s both;
}
.ls-splash-tag{
  font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:3px;
  text-transform:uppercase; color:var(--faint); margin-top:26px;
  animation:splash-rise 1s cubic-bezier(.22,1,.36,1) 1.25s both;
}
@keyframes splash-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
/* a filament warming up: stutter, catch, hold */
@keyframes splash-flicker{
  0%{ opacity:0; } 7%{ opacity:.5; } 12%{ opacity:.1; } 20%{ opacity:.65; }
  27%{ opacity:.3; } 38%{ opacity:.85; } 100%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .ls-splash-glow, .ls-splash-logo, .ls-splash-blurb, .ls-splash-tag{ animation:none; }
}
.ls-wrap{ position:relative; z-index:1; max-width:680px; margin:0 auto; padding:34px 22px 120px; }
.ls-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:42px; gap:12px; }
.ls-topgrp{ display:flex; align-items:center; gap:12px; }
.ls-save{ font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:5px; opacity:.7; white-space:nowrap; }
.ls-toolbtn{ background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:999px;
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:8px 14px; display:flex; align-items:center; gap:7px; cursor:pointer; transition:all .2s; white-space:nowrap; }
.ls-toolbtn:hover{ border-color:var(--accent); color:var(--accent); }
.ls-title{ width:100%; background:transparent; border:none; outline:none; text-align:center;
  font-family:'Instrument Serif',serif; font-style:italic; color:var(--ink);
  font-size:clamp(38px,9vw,60px); line-height:1.05; margin:8px 0 46px; }
.ls-title::placeholder{ color: var(--faint); }
.ls-section{ margin-bottom:30px; padding-left:14px; border-left:1px solid transparent; transition:border-color .3s; }
.ls-section.is-active{ border-left-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.ls-sechead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; min-height:22px; }
.ls-seclabel{ font-family:'DM Mono',monospace; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--accent);
  background:transparent; border:none; outline:none; cursor:pointer; padding:2px 0; }
.ls-secmeta{ font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:1px; color:var(--muted); opacity:0; transition:opacity .25s; }
.ls-section:hover .ls-secmeta, .ls-section.is-active .ls-secmeta{ opacity:.65; }
.ls-secctrl{ display:flex; align-items:center; gap:2px; opacity:0; transition:opacity .25s; }
.ls-section:hover .ls-secctrl, .ls-section.is-active .ls-secctrl{ opacity:1; }
.ls-ico{ background:transparent; border:none; color:var(--muted); cursor:pointer; padding:5px; line-height:0; border-radius:6px; transition:color .2s,background .2s; }
.ls-ico:hover{ color:var(--accent); background:var(--soft); }
.ls-line{ display:flex; align-items:flex-start; gap:12px; }
.ls-syl{ flex:none; width:24px; text-align:right; font-family:'DM Mono',monospace; font-size:11px; color:var(--muted);
  padding-top:11px; opacity:.45; transition:color .2s,opacity .2s; user-select:none; }
.ls-line.is-focus .ls-syl{ color:var(--accent); opacity:1; }
.ls-input{ flex:1; background:transparent; border:none; outline:none; color:var(--ink); caret-color:var(--accent);
  font-family:'Spectral',serif; font-weight:300; font-size:19px; line-height:1.95; padding:0; min-width:0; }
.ls-input::placeholder{ color: var(--faint); font-style:italic; }
.ls-addrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.ls-chip{ background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:7px;
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  padding:7px 12px; display:flex; align-items:center; gap:6px; cursor:pointer; transition:all .18s; }
.ls-chip:hover{ border-color:var(--accent); color:var(--accent); }
.ls-foot{ display:flex; align-items:center; gap:18px; margin-top:46px; flex-wrap:wrap;
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.5px; color:var(--muted); }
.ls-foot .stat b{ color:var(--ink); font-weight:500; }
.ls-foot .sp{ flex:1; }
.ls-actbtn{ background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:7px;
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  padding:8px 13px; display:flex; align-items:center; gap:7px; cursor:pointer; transition:all .18s; }
.ls-actbtn:hover{ border-color:var(--accent); color:var(--accent); }
.ls-scrim{ position:fixed; inset:0; background:rgba(0, 0, 0, 0.5); backdrop-filter:blur(2px); z-index:8; opacity:0; pointer-events:none; transition:opacity .3s; }
.ls-scrim.open{ opacity:1; pointer-events:auto; }
.ls-panel{ position:fixed; top:0; right:0; bottom:0; width:min(370px,88vw); background:var(--panel);
  border-left:1px solid var(--line); z-index:9; transform:translateX(102%); transition:transform .35s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; box-shadow:-30px 0 60px rgba(0,0,0,.4); }
.ls-panel.open{ transform:translateX(0); }
.ls-panel.left{ left:0; right:auto; border-left:none; border-right:1px solid var(--line); transform:translateX(-102%); box-shadow:30px 0 60px rgba(0,0,0,.4); }
.ls-panel.left.open{ transform:translateX(0); }
.ls-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 22px 14px; }
.ls-panel-head h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:24px; margin:0; font-weight:400; }
.ls-panel-head .ct{ font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); margin-left:8px; }
.ls-panel-body{ overflow-y:auto; padding:6px 22px 30px; flex:1; }
.ls-block{ margin-bottom:30px; }
.ls-block-h{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.ls-spark{ font-family:'Spectral',serif; font-style:italic; font-size:18px; line-height:1.5; color:var(--ink); min-height:54px; }
.ls-sparkrow{ display:flex; gap:8px; margin-top:12px; }
.ls-rinput{ width:100%; background:var(--soft); border:1px solid var(--line); border-radius:8px; color:var(--ink);
  font-family:'Spectral',serif; font-size:16px; padding:11px 13px; outline:none; }
.ls-rinput:focus{ border-color:var(--accent); }
.ls-rtier{ font-family:'DM Mono',monospace; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; }
.ls-rwords{ display:flex; flex-wrap:wrap; gap:7px; }
.ls-rword{ font-family:'Spectral',serif; font-size:15px; color:var(--ink); background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:4px 10px; }
.ls-empty{ color:var(--muted); font-style:italic; font-size:14px; }
.ls-newsong{ width:100%; justify-content:center; margin-bottom:16px; padding:11px; }
.ls-songrow{ display:flex; align-items:flex-start; gap:8px; padding:12px; border:1px solid var(--line); border-radius:9px; margin-bottom:9px; transition:all .18s; background:transparent; }
.ls-songrow:hover{ border-color:var(--muted); }
.ls-songrow.cur{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.ls-songopen{ flex:1; min-width:0; background:transparent; border:none; text-align:left; cursor:pointer; padding:0; color:inherit; }
.ls-songrow .nm{ font-family:'Spectral',serif; font-size:17px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ls-songrow .nm.empty{ font-style:italic; color:var(--muted); }
.ls-songrow .mt{ font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.5px; color:var(--muted); margin-top:5px; }
.ls-songrow .acts{ display:flex; gap:1px; flex:none; }
.ls-toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); z-index:20;
  background: var(--ink); color: var(--bg); font-family:'DM Mono',monospace; font-size:12px; letter-spacing:.5px;
  padding:11px 18px; border-radius:999px; display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none; transition:all .3s; }
.ls-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:560px){ .ls-wrap{ padding:26px 16px 110px; } .ls-brand{ font-size:20px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

body { background: var(--bg); }
.ls-sechead-r { display: flex; align-items: center; gap: 10px; }
.ls-modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ls-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; max-width: 360px; width: 100%; }
.ls-modal h3 { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.ls-modal p { font-family: 'Spectral', serif; font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.ls-modal-opts { display: flex; flex-direction: column; gap: 8px; }
.ls-modal-opts .ls-actbtn { justify-content: center; padding: 11px; }
.ls-modal-opts .ls-actbtn.danger:hover { border-color: #c0564a; color: #c0564a; }
.ls-modal-cancel { opacity: .7; }

/* ---- color scheme picker ---- */
.color-schemes { display: flex; flex-direction: column; gap: 7px; }
.scheme-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: transparent; border: 1px solid var(--line); border-radius: 9px;
    padding: 9px 12px; cursor: pointer; transition: border-color .18s; }
.scheme-btn:hover { border-color: var(--muted); }
.scheme-btn.active { border-color: var(--accent); }
.scheme-preview { display: flex; gap: 4px; align-items: center; }
.scheme-dot { width: 11px; height: 11px; border-radius: 50%; }
.scheme-dot.scheme-bg { width: 15px; height: 15px; border: 1px solid var(--line); }
.scheme-name { font-family: 'Spectral', serif; font-size: 14.5px; color: var(--ink); }

/* ---- spark group picker ---- */
.ls-select { appearance: none; -webkit-appearance: none; cursor: pointer; margin-bottom: 12px; padding-right: 36px;
    color: var(--ink); font-size: 14.5px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat; }
.ls-select optgroup, .ls-select option { background: var(--panel); color: var(--ink); }

/* ---- spark generation progress ---- */
.ls-genrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ls-progress { flex: 1; height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.ls-progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ---- album switcher ---- */
.ls-album-h { display: flex; align-items: center; gap: 2px; margin-bottom: 14px; }
.ls-album-select { flex: 1; min-width: 0; margin-bottom: 0; }

/* ---- about page ---- */
.ls-about-link{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.ls-about-link:hover{ border-bottom-color:var(--accent); }
a.ls-toolbtn{ text-decoration:none; }
.ls-about-title{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:clamp(40px,9vw,58px); line-height:1.1; text-align:center; color:var(--ink); margin:10px 0 14px; }
.ls-about-title span{ color:var(--accent); }
.ls-about-lede{ font-style:italic; font-weight:300; font-size:17px; line-height:1.7; color:var(--muted);
  text-align:center; max-width:30em; margin:0 auto 56px; }
.ls-about section{ margin-bottom:42px; }
.ls-about p, .ls-about li{ font-weight:300; font-size:16.5px; line-height:1.8; color:var(--ink); margin:0 0 12px; }
.ls-about ul{ margin:0 0 12px; padding-left:24px; }
.ls-about li{ margin-bottom:5px; }
.ls-about li::marker{ color:var(--accent); }
.ls-about-tag{ font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:3px;
  text-transform:uppercase; color:var(--faint); text-align:center; margin-top:64px; }