:root {
  --maxw: 760px;
  --accent: #2b7cff;
  --muted: #666;
  --bg: #f6f8fb;
  --card: #fff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#333;
  display:flex;
  justify-content:center;
  padding:20px;
  font-size: 17px;
  background-color: #f7f5ed;
 
}

#app{width:100%; max-width:var(--maxw);}
header{padding:14px 0;}
h1{margin:0; font-size:20px;}

.menu{display:flex; gap 3px; flex-wrap:wrap; margin-bottom:16px;}
.menu button{
  flex:1 1 140px;
  background:var(--card);
  border:1px solid #e1e6f0;
  padding:10px;
  cursor:pointer;
  border-radius:8px;
}
.menu button:hover{box-shadow:0 2px 6px rgba(0,0,0,0.06);}

#screen{background:var(--card); padding:16px; border-radius:10px; min-height:280px; box-shadow:0 2px 8px rgba(12, 20, 40, 0.04);}

.card{padding:12px; border-radius:8px; background:#fff; margin-bottom:12px; border:1px solid #eef2f8;}
.big{font-size:18px; font-weight:600; margin-bottom:8px;}
.meaning{color:var(--muted); margin-bottom:6px;}
.example{font-style:italic; margin-bottom:10px;}
.controls{display:flex; gap:8px; margin-top:8px;}
.btn{padding:8px 12px; border-radius:6px; border:1px solid #dfe7ff; background:linear-gradient(180deg,#f8fbff,#fff); cursor:pointer;}
.option{display:block; padding:10px; border:1px solid #e7edf8; border-radius:8px; margin:8px 0; cursor:pointer;}
.option.correct{background:#e6f9ea; border-color:#b8e6c6;}
.option.wrong{background:#ffecec; border-color:#f2c1c1;}

.footer-note{color:var(--muted); font-size:13px; margin-top:8px;}
nav {
  margin-top: 10px;
}

nav a {
 color:#407dde;
  text-decoration: none;
  margin: 0 10px;
  font-size: 18px;
  font-weight: bold;
  border: 1px;
  border-radius: 5px;
  padding:5px;
  line-height: 1.2em;
}

nav a:hover {
  text-decoration: underline;
}

header {
margin-bottom: 20px;
text-align: center;
background-color: #fff;
padding: 7px 7px 12px 7px;
border: none;
border-radius: 25px; 
}