:root{
  --primary: #00467F;
  --primary-dark: #00223E;
  --primary-mid: #3E7CAE;
  --sky: #7FB2DA;
  --paper: #FFFFFF;
  --paper-shadow: #D3E2EE;
  --ink: #002A4D;
  --ink-soft: #4E7391;
  --line: rgba(0,42,77,0.12);
}

*{ box-sizing: border-box; }

html,body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(ellipse at top, var(--primary) 0%, var(--primary-dark) 78%);
  background-attachment: fixed;
  font-family:'Work Sans', sans-serif;
  color: var(--paper);
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ---- nav ---- */
.site-nav{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 28px 24px 40px;
}

.brand{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.site-nav nav{ display:flex; gap: 26px; }

.site-nav nav a{
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  transition: color 0.15s ease;
}

.site-nav nav a:hover, .site-nav nav a.active{ color: var(--paper); }

/* ---- buttons ---- */
.btn{
  display:inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight:600;
  font-size: 0.95rem;
  cursor:pointer;
  border: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btn:active{ transform: scale(0.97); }

.btn-primary{ background: var(--paper); color: var(--primary); }
.btn-primary:hover{ opacity: 0.9; }

.btn-ghost{
  background: rgba(255,255,255,0.1);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.3);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.18); }

/* ---- hero (home page) ---- */
.hero{
  padding: 40px 0 60px;
}

.hero h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 11ch;
  margin: 0 0 20px;
}

.hero p{
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 46ch;
  margin: 0 0 30px;
}

.hero .actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---- how it works (sequence, so numbered is warranted) ---- */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 70px;
}

.step{
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: 16px;
}

.step .num{
  font-family:'Fraunces', serif;
  font-size: 1.3rem;
  color: var(--sky);
  display:block;
  margin-bottom: 10px;
}

.step h3{
  font-size: 1rem;
  margin: 0 0 8px;
  font-weight:600;
}

.step p{
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.68);
  margin:0;
}

@media (max-width: 680px){
  .steps{ grid-template-columns: 1fr; gap: 26px; }
}

/* ---- page header (decks / study) ---- */
.page-head{
  margin-bottom: 34px;
}

.page-head h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: 2rem;
  margin: 0 0 8px;
}

.page-head p{
  color: rgba(255,255,255,0.68);
  margin:0;
  font-size: 0.95rem;
}

/* ---- deck grid ---- */
.deck-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 620px){
  .deck-grid{ grid-template-columns: 1fr; }
}

.deck-card{
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 24px;
  display:flex;
  flex-direction:column;
  box-shadow: 0 14px 0 -6px var(--paper-shadow), 0 16px 26px rgba(0,0,0,0.28);
}

.deck-card .count{
  font-size: 0.74rem;
  color: var(--ink-soft);
  background: rgba(0,42,77,0.06);
  padding: 4px 11px;
  border-radius: 100px;
  align-self:flex-start;
  margin-bottom: 16px;
}

.deck-card h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: 1.25rem;
  margin: 0 0 8px;
}

.deck-card p{
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 20px;
  flex:1;
}

.deck-card .btn{ align-self:flex-start; }

.deck-card .deck-progress{ margin: 0 0 18px; }
.deck-progress .bar{
  height: 6px;
  border-radius: 3px;
  background: rgba(0,42,77,0.1);
  overflow: hidden;
}
.deck-progress .bar span{
  display:block;
  height:100%;
  background: var(--primary-mid);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.deck-progress .label{
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ---- flashcard study screen ---- */
.progress-row{
  display:flex;
  gap: 6px;
  margin-bottom: 10px;
}

.tick{
  flex:1;
  height: 7px;
  border-radius: 3px;
  background: rgba(255,255,255,0.16);
  position: relative;
  overflow:hidden;
}

.tick.seen::after{ content:""; position:absolute; inset:0; background: var(--sky); }
.tick.mastered::after{ content:""; position:absolute; inset:0; background: var(--paper); }

.progress-caption{
  display:flex;
  justify-content:space-between;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 34px;
}

.progress-caption strong{ color: var(--paper); font-weight:600; }

.stage{ perspective: 1600px; margin-bottom: 26px; }

.card{
  position:relative;
  width:100%;
  min-height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.4,.2,.2,1);
  cursor:pointer;
}

.card.flipped{ transform: rotateY(180deg); }

.face{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 18px 0 -6px var(--paper-shadow), 0 20px 30px rgba(0,0,0,0.35);
  padding: 30px 32px;
  display:flex;
  flex-direction:column;
  color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--line) 34px);
  background-position: 0 78px;
  overflow-y: auto;
}

/* optional image on a card face */
.card-img{
  display:block;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin: 12px 0 4px;
  background: rgba(0,42,77,0.04);
}
.card-img[hidden]{ display:none; }

.face.back{ transform: rotateY(180deg); }

.face .tab{
  align-self:flex-start;
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: rgba(0,42,77,0.06);
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.face .label{ font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 10px; }

.face .content{
  font-family:'Fraunces', serif;
  font-size: 1.5rem;
  line-height: 1.42;
  font-weight: 500;
  flex:1;
}

.face.back .content{ font-style: italic; color: #002A4D; }

.hint{ margin-top: 18px; font-size: 0.78rem; color: rgba(0,42,77,0.4); text-align:right; }

.assess-row{ display:flex; gap: 12px; margin-bottom: 18px; min-height: 46px; }

.assess-row button{
  flex:1;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size: 0.92rem;
  cursor:pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.assess-row button:active{ transform: scale(0.97); }

.btn-again{ background: rgba(255,255,255,0.12); color: var(--paper); border: 1px solid rgba(255,255,255,0.3) !important; }
.btn-again:hover{ background: rgba(255,255,255,0.2); }

.btn-know{ background: var(--sky); color: #00304F; }
.btn-know:hover{ opacity:0.92; }

.assess-row.disabled button{ opacity: 0.35; pointer-events: none; }

.nav-row{ display:flex; align-items:center; justify-content:space-between; }

.nav-btn{
  background:none; border:none;
  color: rgba(255,255,255,0.75);
  font-family:'Work Sans', sans-serif;
  font-size: 0.88rem;
  cursor:pointer;
  padding: 8px 4px;
}

.nav-btn:hover{ color: var(--paper); }
.nav-btn:disabled{ opacity:0.3; cursor:default; }

.nav-center{ font-size: 0.85rem; color: rgba(255,255,255,0.6); }

.back-line{ margin-bottom: 26px; }
.back-line a{ font-size: 0.85rem; color: rgba(255,255,255,0.65); }
.back-line a:hover{ color: var(--paper); }

.restart-line{ text-align:center; margin-top: 36px; }

.restart-line button{
  background:none; border:none;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor:pointer;
}

.complete-banner{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 24px;
}

.complete-banner p{ margin: 0 0 12px; font-size: 0.92rem; color: rgba(255,255,255,0.85); }

@media (max-width: 480px){
  .face{ padding: 24px 22px; }
  .face .content{ font-size: 1.25rem; }
}