* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg: #fff; --text: #111; --text-muted: #555; --border: #ddd; --surface: #f5f5f5; --accent: #0066cc; --accent-hover: #0055aa; }
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #e5e5e5; --text-muted: #999; --border: #333; --surface: #252525; --accent: #5599ff; --accent-hover: #77aaff; } }
body { font-family: system-ui, -apple-system, sans-serif; min-height: 100vh; padding: 24px 16px; line-height: 1.5; font-size: 16px; background: var(--bg); color: var(--text); }
main { margin: 0 auto; }
section { padding: 24px 0; margin-bottom: 16px; }
h1 { font-size: 24px; margin-bottom: 8px; }
h2 { font-size: 20px; margin-bottom: 24px; }
p { margin-bottom: 24px; font-size: 16px; }
nav { display: flex; gap: 16px; margin-bottom: 16px; }
nav a { text-decoration: none; color: var(--accent); }
nav a:hover { color: var(--accent-hover); }
table { border-collapse: collapse; margin-top: 16px; }
th, td { padding: 16px 8px; text-align: left; font-size: 16px; border-bottom: 1px solid var(--border); }
button, a[role="button"] { padding: 8px 24px; border: none; cursor: pointer; font-family: inherit; font-size: 16px; text-decoration: none; display: inline-block; background: var(--accent); color: #fff; }
button:hover, a[role="button"]:hover { background: var(--accent-hover); }
label { display: block; margin-bottom: 8px; font-size: 16px; }
input[type="text"], input[type="email"], input[type="password"] { padding: 8px 16px; border: 1px solid var(--border); font-size: 16px; font-family: inherit; background: var(--surface); color: var(--text); width: 100%; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
fieldset { border: none; margin-bottom: 16px; }
aside { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
article { padding: 24px 0; }
article strong { display: block; font-size: 32px; margin-bottom: 8px; }
article span { font-size: 16px; }
ul { list-style: none; }
ul li { margin-bottom: 8px; padding: 8px 0; font-size: 16px; }
ruby { ruby-position: over; }
rt { font-size: 12px; }
output { display: block; padding: 16px 0; margin-top: 16px; font-size: 16px; }
figure { padding: 24px 0; }
figure b { display: block; font-size: 48px; margin-bottom: 8px; }
figure b rt { font-size: 16px; }
figure em { display: block; font-size: 16px; margin-bottom: 8px; font-style: normal; }
figure mark { display: inline-block; font-size: 16px; padding: 0; margin-bottom: 24px; background: transparent; color: var(--accent); }
figure input[type="text"] { font-size: 16px; }
.verb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.verb-card { background: var(--surface); padding: 16px; border: 1px solid var(--border); }
.verb-pair { display: flex; justify-content: space-between; margin-bottom: 8px; }
.verb-pair span { font-size: 18px; }
.meaning { color: var(--text-muted); font-size: 14px; }
div[role="alert"] { padding: 16px 0; margin-bottom: 16px; }
@media (max-width: 480px) {
    aside { grid-template-columns: 1fr; }
    figure b { font-size: 32px; }
    nav { flex-wrap: wrap; gap: 8px; }
    section { padding: 16px 0; }
}