@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root[data-theme="light"]{
  --paper: #EDEAE0;
  --paper-2: #E4E0D2;
  --panel: #F5F2E9;
  --ink: #1E2027;
  --ink-soft: #464439;
  --ink-faint: #726F66;
  --rule: #D3CEBD;
  --stress: #8C3231;
  --stress-soft: #B08585;
  --near: #3F6B5C;
  --near-bg: #E1E8E1;
  --accent-glow: rgba(140,50,49,0.07);
  --shadow: 0 1px 2px rgba(30,32,39,0.05), 0 4px 16px rgba(30,32,39,0.04);
  --texture-dot: rgba(85,83,74,0.045);
}
:root[data-theme="dark"]{
  --paper: #16171B;
  --paper-2: #1E2026;
  --panel: #202228;
  --ink: #E8E4D9;
  --ink-soft: #BAB6AA;
  --ink-faint: #918D82;
  --rule: #2E3138;
  --stress: #E0836F;
  --stress-soft: #8A6560;
  --near: #7FB79E;
  --near-bg: #22302B;
  --accent-glow: rgba(224,131,111,0.07);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.25);
  --texture-dot: rgba(232,228,217,0.03);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  background: var(--paper);
  background-image: radial-gradient(var(--texture-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  transition: background-color .35s ease, color .35s ease;
}
a{ color: var(--stress); }

/* ---------- Nav ---------- */
.site-nav{
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3.5rem;
  background: linear-gradient(to bottom, var(--panel), transparent);
  transition: border-color .35s ease;
}
.site-nav-inner{
  max-width: 760px; margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap: 14px;
}
.logo{
  font-family:'IBM Plex Mono',monospace;
  font-size:17px; font-weight:500;
  color: var(--ink); text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.logo-mark{
  font-size: 15px; letter-spacing:2px; color: var(--stress);
}
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-links{ display:flex; gap:22px; }
.nav-btn{
  font-family:'Inter',sans-serif; font-size:16px;
  color: var(--ink-soft); text-decoration:none;
  background:none; border:none; cursor:pointer;
  padding:0; transition: color .2s ease;
}
.nav-btn:hover{ color: var(--ink); }
.nav-btn.active{ color: var(--ink); font-weight:500; }

#theme-toggle{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--rule); background: var(--panel);
  color: var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s ease;
  flex-shrink:0;
}
#theme-toggle:hover{ color: var(--stress); border-color: var(--stress-soft); transform: rotate(15deg); }
#theme-toggle svg{ width:20px; height:20px; }

/* ---------- Layout ---------- */
.page{ max-width:760px; margin:0 auto; padding: 0 1.5rem 6rem; }
.view{ display:none; animation: fadeUp .4s ease both; }
.view.active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-faint); margin:0 0 .6rem;
}
h1{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:48px; margin:0 0 .5rem; letter-spacing:-.015em; line-height:1.1;
}
h2{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:28px; margin:2.6rem 0 .8rem; letter-spacing:-.01em;
}
.sub{ font-size:17px; color:var(--ink-soft); margin:0 0 2.5rem; max-width:48ch; line-height:1.7; }
.sub.lede{ font-size:19px; }
p{ font-size:17px; line-height:1.8; margin:0 0 1.1rem; }
ul.plain{ padding-left:1.2rem; margin:0 0 1.2rem; }
ul.plain li{ font-size:17px; line-height:1.8; margin-bottom:.4rem; }

/* ---------- Search ---------- */
.search-panel{
  background: var(--panel);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:1.5rem;
  box-shadow: var(--shadow);
  margin-bottom:2rem;
  transition: background-color .35s ease, border-color .35s ease;
}
.search-row{
  display:flex; border-bottom:1.5px solid var(--ink);
  padding-bottom:10px; margin-bottom:1.25rem;
  transition: border-color .35s ease;
}
#word-input{
  flex:1; border:none; background:transparent;
  font-family:'Fraunces',serif; font-size:34px;
  color:var(--ink); outline:none; padding:0; min-width:0;
}
#word-input::placeholder{ color:var(--ink-faint); }
#search-btn{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  border:none; padding:0 24px; cursor:pointer; border-radius:4px;
  transition: opacity .2s ease;
}
#search-btn:hover{ opacity:.85; }

.filters{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.filter-group{ display:flex; align-items:center; gap:8px; }
.filter-label{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
}
select{
  font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:5px; padding:9px 13px; cursor:pointer;
  transition: background-color .35s ease, border-color .35s ease;
}

.status{
  font-family:'IBM Plex Mono',monospace; font-size:15px;
  color:var(--ink-faint); margin-bottom:1.25rem;
}

/* ---------- Results ---------- */
.results{ display:flex; flex-direction:column; gap:8px; }
.result-row{
  display:flex; align-items:center; gap:18px;
  padding:13px 16px;
  background: var(--panel);
  border:1px solid var(--rule);
  border-radius:8px;
  animation: fadeUp .35s ease both;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.result-row:hover{
  transform: translateX(3px);
  box-shadow: var(--shadow);
  border-color: var(--stress-soft);
}
.result-word-block{ display:flex; flex-direction:column; gap:4px; min-width:150px; }
.scansion{
  font-family:'IBM Plex Mono',monospace; font-size:15px;
  letter-spacing:3px; color:var(--stress-soft);
}
.scansion .stressed{ color:var(--stress); }
.result-word{ font-family:'Fraunces',serif; font-weight:500; font-size:23px; }
.result-meta{ display:flex; gap:8px; margin-left:auto; align-items:center; }
.tag{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  letter-spacing:.04em; padding:3px 9px; border-radius:4px;
  color:var(--ink-soft); background:var(--paper-2); white-space:nowrap;
}
.tag.near{ color:var(--near); background:var(--near-bg); }
.empty{
  font-family:'Fraunces',serif; font-style:italic;
  color:var(--ink-faint); font-size:18px; padding:2rem 0;
}

/* ---------- Example boxes ---------- */
.example-box{
  background:var(--panel); border:1px solid var(--rule);
  border-left:3px solid var(--stress);
  border-radius:8px; padding:1.1rem 1.4rem; margin:1.2rem 0;
  box-shadow: var(--shadow);
}
.example-box .scan{
  font-family:'IBM Plex Mono',monospace; letter-spacing:3px;
  color:var(--stress-soft); font-size:16px; margin-bottom:4px;
}
.example-box .scan .stressed{ color:var(--stress); }
.example-box .word{ font-family:'Fraunces',serif; font-weight:500; font-size:22px; }

/* ---------- Footer ---------- */
footer.site-footer{
  margin-top:4rem; padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  color:var(--ink-faint);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  line-height:1.6;
}
footer.site-footer a{ color:var(--ink-faint); }

@media (max-width:560px){
  h1{ font-size:36px; }
  .site-nav-inner{ padding:1.1rem 1.25rem; }
  .nav-right{ gap:14px; }
  .nav-links{ gap:14px; }
  .nav-btn{ font-size:15px; }
  .result-row{ flex-wrap:wrap; gap:10px; }
  .result-meta{ margin-left:0; }
}

/* ---------- Accessibility + inline dot helpers ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.dot-stressed{ color:var(--stress); font-family:'IBM Plex Mono',monospace; }
.dot-unstressed{ color:var(--stress-soft); font-family:'IBM Plex Mono',monospace; }

/* ---------- Homepage intro block ---------- */
.intro-block{
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  max-width: 58ch;
}
.intro-block h2{ margin-top: 0; }
.intro-block p{ color: var(--ink-soft); }
.intro-block em{
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--ink);
}

/* ---------- Write workspace ---------- */
.write-controls{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-bottom:.75rem;
}
.ghost-btn{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:5px;
  padding:9px 15px; cursor:pointer;
  transition: all .2s ease;
}
.ghost-btn:hover{ color:var(--stress); border-color:var(--stress-soft); }
.form-note{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  color:var(--ink-faint); margin:0 0 2rem; line-height:1.6;
}

.lines-wrap{ display:flex; flex-direction:column; gap:14px; }
.line-row{
  background:var(--panel); border:1px solid var(--rule);
  border-radius:8px; padding:12px 16px 14px;
  transition: border-color .2s ease;
}
.line-row:focus-within{ border-color:var(--stress-soft); box-shadow:var(--shadow); }
.line-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.line-num{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  color:var(--ink-faint); min-width:14px;
}
.rhyme-label{
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  letter-spacing:.08em; padding:2px 7px; border-radius:3px;
  background:var(--near-bg); color:var(--near);
}
.syl-target{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  color:var(--ink-faint); margin-left:auto;
}
.syl-target.match{ color:var(--near); }
.syl-target.over{ color:var(--stress); }
.rhyme-btn{
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  letter-spacing:.06em; background:transparent;
  color:var(--ink-faint); border:1px solid var(--rule);
  border-radius:4px; padding:7px 12px; cursor:pointer;
  transition: all .2s ease;
}
.rhyme-btn:hover{ color:var(--stress); border-color:var(--stress-soft); }

.line-scan{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  min-height:17px; margin-bottom:2px; letter-spacing:1px;
}
.line-scan .w-group{ margin-right:9px; }
.line-scan .d-strong{ color:var(--stress); }
.line-scan .d-mid{ color:var(--stress); opacity:.55; font-size:13px; }
.line-scan .d-weak{ color:var(--stress-soft); }
.line-scan .w-unknown{ color:var(--ink-faint); margin-right:9px; }

.line-input{
  width:100%; border:none; background:transparent;
  font-family:'Fraunces',serif; font-size:21px;
  color:var(--ink); outline:none; padding:0;
}
.line-input::placeholder{ color:var(--ink-faint); font-style:italic; }

/* rhyme panel */
.rhyme-panel{
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--rule); min-height:80px;
}
.rhyme-empty{
  font-family:'Fraunces',serif; font-style:italic;
  color:var(--ink-faint); font-size:17px;
}
.rhyme-title{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:22px; margin:0 0 .4rem;
}
.rhyme-note{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  color:var(--ink-faint); margin:0 0 1rem; line-height:1.6;
}
.rhyme-grid{
  display:flex; flex-wrap:wrap; gap:8px;
}
.rhyme-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:var(--panel); border:1px solid var(--rule);
  border-radius:6px; padding:9px 14px; cursor:pointer;
  transition: all .16s ease;
}
.rhyme-chip:hover{
  border-color:var(--stress-soft); transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.chip-scan{
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:2px;
}
.chip-scan .d-strong{ color:var(--stress); }
.chip-scan .d-mid{ color:var(--stress); opacity:.55; }
.chip-scan .d-weak{ color:var(--stress-soft); }
.chip-word{
  font-family:'Fraunces',serif; font-size:18px; color:var(--ink);
}

@media (max-width:560px){
  .line-input{ font-size:19px; }
  .rhyme-btn{ font-size:9px; }
}

/* ---------- Inline legend ---------- */
.legend{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 16px; margin-bottom:1.25rem;
  padding-bottom:.9rem; border-bottom:1px dashed var(--rule);
}
.legend-item{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  letter-spacing:.04em; color:var(--ink-faint);
  display:flex; align-items:center; gap:5px;
}
.legend-item .d-strong{ color:var(--stress); font-size:14px; }
.legend-item .d-mid{ color:var(--stress); opacity:.55; font-size:13px; }
.legend-item .d-weak{ color:var(--stress-soft); font-size:14px; }
.legend-item .w-unknown{ color:var(--ink-faint); font-size:14px; }
.legend-more{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  margin-left:auto;
}
.legend-more a{ color:var(--ink-faint); text-decoration:underline; text-underline-offset:2px; }
.legend-more a:hover{ color:var(--stress); }

@media (max-width:560px){
  .legend{ gap:5px 12px; }
  .legend-more{ margin-left:0; }
}

/* ---------- Verse call-to-action ---------- */
.verse-cta{
  display:block; text-decoration:none;
  background:var(--panel); border:1px solid var(--rule);
  border-left:3px solid var(--stress);
  border-radius:8px; padding:.95rem 1.2rem; margin-bottom:1.5rem;
  transition: all .2s ease;
}
.verse-cta:hover{
  border-color:var(--stress-soft); border-left-color:var(--stress);
  transform:translateX(3px); box-shadow:var(--shadow);
}
.verse-cta-main{
  display:block; font-family:'Fraunces',serif; font-weight:500;
  font-size:19px; color:var(--ink); margin-bottom:2px;
}
.verse-cta-sub{
  display:block; font-family:'Inter',sans-serif;
  font-size:15px; color:var(--ink-soft); line-height:1.5;
}

/* ---------- How-to steps ---------- */
.how-to{
  margin:0 0 2.2rem; padding-left:1.3rem;
  max-width:52ch;
}
.how-to li{
  font-family:'Inter',sans-serif; font-size:16px;
  color:var(--ink-soft); line-height:1.6; margin-bottom:.35rem;
}
.how-to li strong{ color:var(--ink); }

/* ---------- Example verse ---------- */
.example-verse{
  background:var(--panel); border:1px solid var(--rule);
  border-left:3px solid var(--near);
  border-radius:8px; padding:1.1rem 1.3rem; margin-bottom:1.6rem;
}
.example-verse-label{
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.7rem;
}
.ev-line{ margin-bottom:.55rem; }
.ev-dots{
  display:block; font-family:'IBM Plex Mono',monospace;
  font-size:14px; letter-spacing:3px; margin-bottom:1px;
}
.ev-text{
  display:block; font-family:'Fraunces',serif;
  font-size:19px; color:var(--ink);
}
.ev-note{
  font-size:15px; color:var(--ink-soft);
  line-height:1.6; margin:.9rem 0 0;
}

/* ---------- Readability aids for smaller screens ---------- */
@media (max-width:560px){
  body{ font-size:17px; }
  .line-input{ font-size:19px; }
  .result-word{ font-size:21px; }
  .nav-btn{ font-size:15px; }
  #word-input{ font-size:28px; }
}

/* Larger, clearer scansion dots everywhere */
.scansion, .line-scan, .chip-scan, .ev-dots, .legend-item span{
  font-size:16px !important;
  letter-spacing:4px;
}
.line-scan .d-mid, .legend-item .d-mid, .chip-scan .d-mid{
  font-size:14px !important;
  opacity:.7;
}

/* Respect users who have set a larger text size in their browser */
html{ font-size:100%; }

/* ---------- Honest framing note ---------- */
.honest-note{
  font-size:15px; color:var(--ink-soft);
  background:var(--paper-2); border-radius:6px;
  padding:.85rem 1.1rem; margin:0 0 2.2rem;
  max-width:54ch; line-height:1.7;
}