:root { --radius: 12px; --gap: 8px; --pad: 10px; }
* { box-sizing: border-box; }
body { 
    background: linear-gradient(180deg, #f5f9ff 0%, #aec0d2 100%);
    min-height: 100vh;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 15px; color:#111; }
    

/* for logo and avatar*/
.header {
  background: transparent;
  display: flex;
  margin-top: 1px; ;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}


.header img {
    width: clamp(3.5rem, 8vw, 4.5rem);
    height: auto;
    border-radius: 50%;
}
.title{
    width: clamp(20rem, 80vw, 55rem); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.1rem, 3vw, 2.4rem); 
    font-weight: bold; 
    margin-top: clamp(.8rem, 1vh, 0.5rem);
    z-index: 1;
}

.subtitle{
    width: clamp(20rem, 80vw, 55rem); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.2rem, 3vw, 1.8rem); 
    font-weight: bold; 
    margin-top: clamp(.8rem, 1vh, 0.5rem);
    z-index: 1;
}

.selectTopic{
    font-size: clamp(0.95rem, 2vw, 1.6rem); 
    font-weight: bold; 
}

h1,h2,h3 { line-height: 1.2; }
a { color: #0b63ce; }
.muted { color:#666; }
.list { display: grid; gap: var(--gap); max-width: 700px; }

a.item {
  display:block; padding: 9px 12px; border:2px solid #e3e3e3; border-radius: var(--radius);
  font-size: clamp(0.9rem 2vw, 1.6rem);
  text-decoration: none; color:#111; background: #fafafa;
}
a.item:hover { background:#f4f4f4; border-color:#ddd; box-shadow: 0 0 1 5px #bcbcde;}
.back { display:inline-block; margin-bottom:16px; text-decoration:none; color:#0b63ce; }
.card { border:1px solid #ddd; border-radius: var(--radius); padding: var(--pad); background:#fff; max-width: 780px; 
    margin-left: auto;
    margin-right: auto;
}
.button-card {max-width: 780px; display: flex; justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin: 12px 0; }
label { font-size: 0.95rem; }
.controls button {
  padding:10px 14px; border-radius:10px; border:1px solid #ccc; background:#f6f6f6; cursor:pointer;
}
.controls button:hover { background:#eef6ff; }
.topic { font-weight:600; 
    font-size: clamp(1rem 2vw, 1.8rem);
    margin: 8px 0 6px; 
    border: 1px solid red;
}
.disc { white-space: pre-wrap;
    font-size: clamp(0.9rem 4vw, 2rem);
    line-height:1.55; color:#222; }
.meter { font-variant-numeric: tabular-nums; }
.breadcrumbs { margin-bottom: 8px; align-items: center;}
.breadcrumbs a { color:#0b63ce; text-decoration:none; }
footer { margin-top: 32px; font-size:.9rem; color:#666; }

/* === Audio hint banner === */
.hint {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid #fde4a2; background: #fff8db;
  border-radius: 10px; color: #6b4e00; margin: 10px 0 14px;
}
.hint .actions { display: flex; gap: 8px; }
.hint button.hint-close {
  border: 1px solid #e9d08f; background: #fff2bf; border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}
.hint button.hint-close:hover { background: #ffe894; }

.button-bar {margin-top:10px; display:flex; gap:.5rem;  width: clamp(20rem, 80vw, 50rem); margin-left: auto;  margin-right: auto;}

.next-button{margin-top: 0px; padding: 4px 6px;  font-size: clamp(0.85rem, 2vw, 1.2rem);height: 30px;  width: 130px;border-radius: 10px;border: 1px solid #999;border-color: dark grey;color: black; background: #7e9bb8;; }

.next-button:hover{ background-color: #80ffff; outline: none;  box-shadow: 0 0 0 2px #ccc inset; }

.next-button:focus {background-color: #ccc; color: black;}