@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genar102.ttf");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genai102.ttf");
    font-style: italic;
    font-weight: normal;
}

:root { --bg:#f0eeeb; --card-bg:#faf9f7; --border:#d0c8bc; --ink:#1e1a14; --dim:#6b6055; --gold:#8b6914; --gold-light:#c9a84c; --shadow:rgba(0,0,0,0.08); }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); min-height:100vh; font-family:'Crimson Text',serif; color:var(--ink); display:flex; flex-direction:column; align-items:center; padding:50px 24px 80px; font-size:18px; }
.back { position:fixed; top:20px; left:20px; }
.back a { color:var(--dim); text-decoration:none; font-size:1rem; font-family:'Cinzel',serif; }
.back a:hover { color:var(--gold); }
h1 { font-family:'Cinzel',serif; font-size:1rem; letter-spacing:0.3em; color:var(--gold); text-transform:uppercase; margin-bottom:8px; margin-top:14px; }
.subtitle { color:var(--dim); font-size:0.95rem; margin-bottom:24px; text-align:center; max-width:540px; line-height:1.6; }
.syllable-verse { max-width:880px; width:100%; text-align:center; margin-bottom:24px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:28px 20px; box-shadow:0 2px 8px var(--shadow); }
.word-block { display:inline-flex; flex-direction:column; align-items:center; margin:0 8px 18px; vertical-align:top; }
.syllables { display:flex; gap:0; margin-bottom:6px; }
.syl { font-family:"GentiumAlt",'Gentium Plus','Gentium','GFS Didot','Noto Serif',serif; font-size:clamp(1rem,2.2vw,1.45rem); font-style:italic; padding:4px 0; border-radius:3px; transition:all 0.15s; }
.syl.stressed { color:var(--gold); font-weight:700; }
.syl.lit { animation:light-up 0.3s ease forwards; }
@keyframes light-up { 0%{background:rgba(201,168,76,0.4);} 100%{background:transparent;} }
.syl-sep { font-size:1rem; color:var(--dim); align-self:center; opacity:0.5; margin:0; padding:0; }
.beat-vis { display:flex; gap:5px; justify-content:center; height:50px; align-items:flex-end; margin-bottom:24px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:10px 16px; box-shadow:0 2px 8px var(--shadow); width:100%; max-width:880px; }
.beat-bar { flex:1; max-width:14px; background:var(--border); border-radius:2px; min-height:4px; transition:height 0.1s,background 0.1s; }
.beat-bar.active { background:var(--gold); }
.controls { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; align-items:center; }
.btn { background:var(--card-bg); border:2px solid var(--gold-light); color:var(--ink); font-family:'Cinzel',serif; font-size:0.88rem; letter-spacing:0.12em; padding:11px 26px; cursor:pointer; transition:all 0.2s; border-radius:4px; }
.btn:hover { background:#f5efd8; border-color:var(--gold); }
.btn.playing { background:var(--gold); color:white; border-color:var(--gold); }
.speed-label { font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:0.12em; color:var(--dim); text-transform:uppercase; }
input[type=range] { width:130px; accent-color:var(--gold); }
.read-section { max-width:820px; width:100%; }
.read-section h2 { font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:0.2em; color:var(--dim); text-transform:uppercase; margin-bottom:16px; text-align:center; border-top:1px solid var(--border); padding-top:24px; }
.colon { font-family:"GentiumAlt",'Gentium Plus','Gentium','GFS Didot','Noto Serif',serif; font-size:1.25rem; font-style:italic; line-height:1.9; text-align:center; margin-bottom:8px; padding:4px 20px; border-radius:6px; transition:background 0.3s; }
.colon .stressed { color:var(--gold); font-size:1.3rem; font-weight:700; }
.reading-note { text-align:center; color:var(--dim); font-size:0.95rem; font-style:italic; margin-top:20px; line-height:1.7; max-width:580px; margin-left:auto; margin-right:auto; }
.phrase-gap { display:inline-block; width:24px; vertical-align:bottom; margin-bottom:18px; }
.colon.active-colon { background:rgba(201,168,76,0.1); }
.word-block.active-word .syl { color:var(--gold); }