:root{
  color-scheme:dark;
  --bg:#070708;
  --panel:rgba(255,255,255,.065);
  --line:rgba(255,255,255,.145);
  --text:#fff4f4;
  --muted:#cdb8b8;
  --gold:#f2c15b;
  --orange:#e05454;
  --green:#d0393f;
  --mint:#ff7c7c;
  --berry:#c01542;
  --red:#ff3f46;
  --crimson:#a70f28;
  --anthracite:#161719;
  --shadow:0 26px 85px rgba(0,0,0,.48);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 14% 0%,rgba(255,63,70,.22),transparent 30%),radial-gradient(circle at 86% 4%,rgba(242,193,91,.10),transparent 32%),radial-gradient(circle at 50% 14%,rgba(160,15,40,.18),transparent 38%),linear-gradient(180deg,#17181b,#09090b 56%,#050506);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.topbar{position:sticky;top:0;z-index:20;background:rgba(9,9,11,.78);border-bottom:1px solid rgba(255,63,70,.20);backdrop-filter:blur(18px)}
.nav{width:min(1220px,calc(100% - 34px));margin:auto;padding:14px 0;display:flex;justify-content:space-between;gap:14px;align-items:center}
.logo{font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.nav-links a,.lang-btn{border:1px solid transparent;border-radius:999px;padding:8px 12px;color:var(--muted);background:transparent;cursor:pointer}
.nav-links a:hover,.lang-btn:hover,.lang-btn.is-active{color:#fff;border-color:rgba(255,63,70,.40);background:rgba(255,63,70,.12)}
.hero{min-height:86vh;position:relative;display:grid;place-items:end center;overflow:hidden;padding:120px 20px 58px;background:#060607}
.hero-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;filter:saturate(.92) contrast(1.08) brightness(.82)}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,6,7,.05),rgba(6,6,7,.46) 52%,rgba(6,6,7,.93) 100%),radial-gradient(circle at 18% 18%,rgba(255,63,70,.28),transparent 34%),radial-gradient(circle at 78% 18%,rgba(242,193,91,.10),transparent 36%)}
.hero-inner{position:relative;z-index:2;width:min(1220px,100%);display:block}
.hero-copy{max-width:790px;padding:0;background:transparent;border:0;box-shadow:none;text-shadow:0 4px 24px rgba(0,0,0,.62)}
.kicker{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:900}
h1{font-size:clamp(54px,8vw,126px);line-height:.88;letter-spacing:-.075em;margin:14px 0 18px}
.hero p,.section-title p,.viewer-info p,.text-card p{color:var(--muted);line-height:1.65}.hero p{font-size:clamp(17px,2vw,22px);max-width:680px;color:#fff2ca}
.button{display:inline-flex;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.085);border-radius:999px;padding:12px 16px;color:#fff;margin-top:14px;font-weight:800}.button.primary{background:linear-gradient(135deg,rgba(255,63,70,.92),rgba(160,15,40,.86) 54%,rgba(242,193,91,.76));color:#180407;border-color:transparent;text-shadow:none}
section{width:min(1220px,calc(100% - 34px));margin:auto;padding:78px 0}.section-title{display:flex;justify-content:space-between;gap:22px;align-items:end;margin-bottom:26px}.section-title h2{font-size:clamp(34px,5vw,64px);letter-spacing:-.055em;margin:0}
.info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.info-card{border:1px solid var(--line);border-radius:26px;padding:20px;background:linear-gradient(145deg,rgba(255,63,70,.115),rgba(255,255,255,.045) 48%,rgba(242,193,91,.055));box-shadow:0 18px 60px rgba(0,0,0,.28);backdrop-filter:blur(12px)}.info-card strong{display:block;font-size:24px;letter-spacing:-.04em}.info-card span{display:block;margin-top:8px;color:var(--muted);line-height:1.5}
.timeline{position:relative;display:grid;gap:18px;margin:36px 0 22px;padding:0 0 0 106px}.timeline::before{content:"";position:absolute;left:73px;top:8px;bottom:8px;width:3px;border-radius:999px;background:linear-gradient(180deg,var(--red),var(--crimson) 42%,var(--gold) 72%,var(--red));box-shadow:0 0 18px rgba(255,63,70,.50),0 0 34px rgba(242,193,91,.16)}
.timeline-group{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:radial-gradient(circle at 0% 0%,rgba(255,63,70,.14),transparent 38%),radial-gradient(circle at 100% 0%,rgba(242,193,91,.08),transparent 40%),rgba(20,21,23,.76);backdrop-filter:blur(10px);padding:20px;box-shadow:0 18px 54px rgba(0,0,0,.30)}.timeline-group::before{content:"";position:absolute;left:-42px;top:27px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--gold));box-shadow:0 0 0 8px rgba(255,63,70,.12),0 0 22px rgba(255,63,70,.55)}
.timeline-heading{margin:0 0 14px;color:var(--gold);font-size:13px;letter-spacing:.14em;text-transform:uppercase}.timeline-song-list{display:grid;gap:10px}.timeline-song{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:start;width:100%;padding:14px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(0,0,0,.24);color:inherit;text-align:left;cursor:pointer}.timeline-song:hover{border-color:rgba(255,63,70,.50);background:rgba(255,63,70,.10);transform:translateY(-1px)}.timeline-num{color:var(--red);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:900}.timeline-song h3{margin:0 0 5px;font-size:22px;letter-spacing:-.035em}.timeline-song p{margin:0;color:var(--muted);line-height:1.45}
.song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.song-card{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--line);background:#141518;min-height:330px;cursor:pointer;box-shadow:var(--shadow);text-align:left;color:inherit;padding:0}.song-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.76;transition:transform .2s ease,opacity .2s ease}.song-card:hover img{transform:scale(1.04);opacity:.9}.song-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.22) 38%,rgba(0,0,0,.86))}.song-card-content{position:absolute;left:18px;right:18px;bottom:18px;z-index:1}.song-card small{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-weight:900}.song-card h3{margin:7px 0 0;font-size:27px;line-height:1;letter-spacing:-.04em}
.viewer{border:1px solid var(--line);border-radius:30px;background:rgba(22,23,25,.72);box-shadow:var(--shadow);overflow:hidden;margin-top:22px}.viewer-top{display:grid;grid-template-columns:minmax(320px,.95fr) 1.05fr;gap:0}.cover-player{position:relative;min-height:520px;background:#070708;overflow:hidden}.cover-player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}.cover-player:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.58))}.visualizer{position:absolute;inset:0;width:100%;height:100%;z-index:2;mix-blend-mode:normal;pointer-events:none;opacity:.92}.viewer-info{padding:28px}.viewer-info small{color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-weight:900}.viewer-info h3{font-size:clamp(34px,5vw,64px);line-height:.9;letter-spacing:-.06em;margin:9px 0 10px}.audio-panel{margin-top:18px;border:1px solid var(--line);border-radius:20px;background:rgba(0,0,0,.32);padding:14px}.audio-controls{display:grid;grid-template-columns:auto auto 1fr minmax(90px,130px);gap:10px;align-items:center}.audio-btn{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;cursor:pointer;display:grid;place-items:center}.seek,.volume{width:100%;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--red) var(--p,0%),rgba(255,255,255,.12) var(--p,0%));outline:none}.seek::-webkit-slider-thumb,.volume::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--red);box-shadow:0 0 14px rgba(255,63,70,.65)}.time{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:6px}.volume-wrap{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center;color:var(--muted);font-size:12px}
.content-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:18px;padding:22px}.text-card{border:1px solid var(--line);border-radius:24px;background:rgba(0,0,0,.26);padding:20px}.text-card h3{margin:0 0 10px;color:#fff}.lyrics-box{max-height:none;height:auto;overflow:visible;padding-right:0;white-space:normal}.lyrics-box pre{white-space:pre-wrap;margin:0;color:#fff1f1;line-height:1.65;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
.notes{border:1px solid var(--line);border-radius:30px;padding:24px;background:linear-gradient(135deg,rgba(255,63,70,.09),rgba(255,255,255,.045),rgba(242,193,91,.045));color:var(--muted);line-height:1.7}.notes strong{color:#fff}.footer{width:min(1220px,calc(100% - 34px));margin:auto;padding:42px 0 70px;color:var(--muted);border-top:1px solid var(--line)}.footer a{color:#fff;text-decoration:none}
@media(max-width:980px){.viewer-top,.content-grid,.song-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-title{align-items:start;flex-direction:column}.timeline{padding-left:0}.timeline::before,.timeline-group::before{display:none}}
@media(max-width:620px){.nav{align-items:flex-start;flex-direction:column}.hero{min-height:76vh;padding:100px 18px 44px}.audio-controls{grid-template-columns:auto auto 1fr}.volume-wrap{grid-column:1/-1}.info-grid{grid-template-columns:1fr}.timeline-song{grid-template-columns:1fr}.song-card{min-height:260px}h1{font-size:54px}}

/* Kara fix: full-width Katzenklumpen hero and equal-sized visualizer/player cards */
.hero{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.hero-art-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.viewer{
  overflow:hidden !important;
}
.viewer-top{
  align-items:stretch !important;
  min-height:clamp(300px,32vw,390px) !important;
  max-height:390px !important;
}
.cover-player{
  min-height:0 !important;
  height:clamp(300px,32vw,390px) !important;
  max-height:390px !important;
  border-top-left-radius:30px !important;
  overflow:hidden !important;
}
.cover-player img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.viewer-info{
  height:clamp(300px,32vw,390px) !important;
  min-height:0 !important;
  max-height:390px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.viewer-info h3{
  max-width:100% !important;
}
.viewer-info p{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.audio-panel{
  flex:0 0 auto !important;
}
@media(max-width:980px){
  .viewer-top{
    min-height:0 !important;
    max-height:none !important;
  }
  .cover-player{
    height:auto !important;
    aspect-ratio:16/9 !important;
    max-height:none !important;
    border-top-right-radius:30px !important;
  }
  .viewer-info{
    height:auto !important;
    max-height:none !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }
  .viewer-info p{
    display:block !important;
    overflow:visible !important;
  }
}

/* Kara fix: restore categorized song archive without changing player or visualizer sizing */
.song-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:28px !important;
}
.song-category-block{
  display:block;
}
.song-category-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:0 0 14px;
  padding:0 2px;
}
.song-category-heading span{
  color:var(--gold);
  font-size:13px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.song-category-heading p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  line-height:1.45;
  text-align:right;
}
.song-category-songs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media(max-width:980px){
  .song-category-songs{grid-template-columns:1fr;}
  .song-category-heading{align-items:flex-start;flex-direction:column;}
  .song-category-heading p{text-align:left;}
}


/* Kara goth palette patch: anthracite base with visible red accents */
.viewer{border-color:rgba(255,63,70,.18) !important;}
.audio-panel{border-color:rgba(255,63,70,.18) !important;}
.audio-btn:hover{border-color:rgba(255,63,70,.48);background:rgba(255,63,70,.14);}
.visualizer{opacity:.86;filter:drop-shadow(0 0 10px rgba(255,63,70,.42)) drop-shadow(0 0 22px rgba(160,15,40,.24));}
.song-card:after{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(20,21,23,.35) 38%,rgba(5,5,6,.91)) !important;}
.song-card:hover{border-color:rgba(255,63,70,.42);}
.song-category-heading span,.viewer-info small,.song-card small,.timeline-heading,.kicker{color:#ff575e !important;}
.info-card strong,.notes strong{color:#fffafa;}


/* Hard override: Katzenklumpen visualizer must stay goth red, not green/gold. */
.cover-player .visualizer,
.cover-player .visualizer-canvas{
  mix-blend-mode:normal !important;
  opacity:.94;
  filter:saturate(1.12) contrast(1.08);
}
.cover-player:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,7,.18),rgba(5,4,7,.42));
}
.cover-player:after{z-index:3;pointer-events:none;}
.cover-player .visualizer{z-index:2;}

/* Song-specific credit and melody hint boxes */
.song-note-stack{
  display:grid;
  gap:8px;
  margin:10px 0 0;
}
.song-note{
  border:1px solid rgba(255,63,70,.22);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,63,70,.105),rgba(0,0,0,.22));
  padding:10px 12px;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.song-note strong{
  display:block;
  color:#ff747a;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 3px;
}
.viewer-info .song-note p{
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:initial !important;
  overflow:visible !important;
  margin:0 !important;
  color:#eadada;
  font-size:12px;
  line-height:1.38;
}
@media(max-width:980px){
  .song-note{padding:11px 12px;}
  .viewer-info .song-note p{font-size:13px;}
}

/* Kara mobile polish: full hero artwork, visible visualizer, player directly below it */
@media (max-width: 760px) {
  section.hero,
  .hero {
    min-height: 72vh !important;
    padding: 0 !important;
    background: #050506 !important;
    display: block !important;
  }
  .hero-art-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #050506 !important;
  }
  .hero-shade {
    background: linear-gradient(180deg, rgba(5,5,6,.02), rgba(5,5,6,.18) 70%, #070708 100%) !important;
  }
  .viewer-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .cover-player {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 220px !important;
    max-height: none !important;
    border-radius: 30px 30px 0 0 !important;
  }
  .cover-player img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  .cover-player .visualizer,
  .cover-player .visualizer-canvas {
    display: block !important;
    visibility: visible !important;
    opacity: .96 !important;
    z-index: 4 !important;
  }
  .cover-player::after {
    z-index: 3 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.26)) !important;
  }
  .viewer-info {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px 16px 22px !important;
    overflow: visible !important;
  }
  .viewer-info .audio-panel {
    order: -10 !important;
    margin: 0 0 18px !important;
  }
  .viewer-info small { order: 1 !important; }
  .viewer-info h3 { order: 2 !important; }
  .viewer-info > p { order: 3 !important; }
  .viewer-info .song-note-stack { order: 4 !important; }
  .viewer-info p {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
  .content-grid {
    padding: 0 16px 18px !important;
    gap: 14px !important;
  }
}


/* Kara translation patch: three lyric boxes on desktop, stacked on smaller screens */
.content-grid.lyrics-translation-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
}
.content-grid.lyrics-translation-grid .text-card{
  min-width:0;
}
@media(max-width:1180px){
  .content-grid.lyrics-translation-grid{
    grid-template-columns:1fr;
  }
}


/* Compact mobile navigation, keeps project links readable on narrow screens */
.topbar{overflow:hidden}
.nav{flex-wrap:nowrap;min-width:0}
.logo{white-space:nowrap;flex:0 0 auto}
.language-switch{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:0 0 auto}
.nav-links{flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-end}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a,.lang-btn{white-space:nowrap;line-height:1;flex:0 0 auto}
@media(max-width:720px){
  .nav{width:calc(100% - 18px);padding:10px 0;gap:8px;flex-direction:row;align-items:center;justify-content:flex-start}
  .logo{font-size:12px;letter-spacing:.08em;max-width:102px;overflow:hidden;text-overflow:ellipsis}
  .language-switch{gap:4px}
  .lang-btn{font-size:11px;padding:7px 8px;min-height:30px}
  .nav-links{gap:5px;flex:1 1 auto;justify-content:flex-start;padding-bottom:2px}
  .nav-links a{font-size:11px;padding:7px 8px;min-height:30px;display:inline-flex;align-items:center}
}