* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background: #0d0d1a; color: #e0e0e0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 12px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; touch-action: manipulation; user-select: none; }
h1 { font-size: 1rem; color: #ffd700; letter-spacing: 2px; font-weight: 400; margin: 0 0 4px 0; }
.subtitle { font-size: 0.65rem; color: #666; margin-bottom: 12px; letter-spacing: 1px; }
button { background: #1a1a30; color: #ccc; border: 1px solid #333; border-radius: 10px; padding: 14px 20px; cursor: pointer; font-size: 1rem; font-family: inherit; transition: all 0.15s; width: 100%; max-width: 360px; margin-bottom: 10px; }
button:hover { background: #252545; border-color: #555; }
button.active { background: #ffd700; color: #0d0d1a; border-color: #ffd700; font-weight: 600; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.controls { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-bottom: 12px; align-items: center; }
.readout { width: 100%; max-width: 360px; background: #06060f; border: 1px solid #222; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #111; font-family: monospace; font-size: 0.9rem; }
.row:last-child { border-bottom: none; }
.label { color: #777; }
.value { color: #ffd700; font-variant-numeric: tabular-nums; }
.vowel { font-size: 2.5rem; text-align: center; padding: 10px 0; font-weight: 500; transition: color 0.2s ease-out; }
.color-bar { height: 6px; border-radius: 3px; margin-top: 6px; background: #111; }
.color-fill { height: 100%; border-radius: 3px; transition: background-color 0.2s ease-out, width 0.2s ease-out; }
.status { font-size: 0.7rem; color: #555; margin-top: 8px; font-family: monospace; text-align: center; }
#testPanel { display: none; width: 100%; max-width: 360px; background: #111122; border: 1px solid #ffd700; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
#testPanel.active { display: block; }
.vowel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.vowel-grid button { padding: 16px 0; font-size: 1.2rem; font-weight: 500; margin: 0; }
.test-log { margin-top: 8px; font-size: 0.75rem; font-family: monospace; color: #aaa; height: 60px; overflow-y: auto; border: 1px solid #333; padding: 6px; border-radius: 6px; background: #000; }
#ex4-section { width: 100%; max-width: 360px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #333; }
#ex4-section h2 { font-size: 1rem; color: #ffd700; margin-bottom: 12px; }
#ex4Timer { font-family: monospace; font-size: 1.5rem; color: #ffd700; text-align: center; padding: 8px; background: #06060f; border-radius: 8px; margin-bottom: 10px; }
#ex4Status { font-size: 0.8rem; color: #888; text-align: center; margin-bottom: 10px; }
.ex4-group { margin-bottom: 10px; }
.ex4-group .group-label { font-size: 0.75rem; color: #777; margin-bottom: 4px; display: block; }
.ex4-marks { display: grid; gap: 6px; }
.ex4-marks.pure { grid-template-columns: repeat(3, 1fr); }
.ex4-marks.fwd, .ex4-marks.back { grid-template-columns: repeat(2, 1fr); }
.ex4-mark { padding: 12px 6px; font-size: 0.9rem; margin: 0; }
#ex4Log { font-size: 0.75rem; font-family: monospace; color: #aaa; height: 70px; overflow-y: auto; border: 1px solid #333; padding: 6px; border-radius: 6px; background: #000; margin-top: 10px; white-space: pre-wrap; }