@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',sans-serif;background:#faf9f6;color:#1a1a1a;line-height:1.72}
a{color:#6d28d9;text-decoration:none}a:hover{color:#4c1d95}
::selection{background:#6d28d9;color:#fff}
header{max-width:800px;margin:0 auto;padding:16px 20px;display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid #1a1a1a}
.logo{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:700;color:#1a1a1a;text-decoration:none}
.logo em{font-style:italic;color:#6d28d9}
header nav a{font-size:.72rem;font-weight:600;color:#888;text-decoration:none;margin-left:12px}
header nav a:hover{color:#6d28d9}
.page{max-width:800px;margin:0 auto;padding:0 20px}
.hero{padding:48px 0 32px;text-align:center}
.hero h1{font-family:'Fraunces',serif;font-size:clamp(1.8rem,4.5vw,3rem);font-weight:700;line-height:1.1;margin-bottom:10px}
.hero h1 em{font-style:italic;color:#6d28d9}
.hero p{font-size:.92rem;color:#666;max-width:460px;margin:0 auto}
.quiz-area{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:24px;margin:20px 0;min-height:300px}
.quiz-area h2{font-family:'Fraunces',serif;font-size:1.2rem;margin-bottom:12px}
.sample-text{font-size:2rem;padding:20px;background:#f5f3ef;border-radius:8px;margin-bottom:16px;text-align:center;min-height:80px;display:flex;align-items:center;justify-content:center}
.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.opt-btn{padding:12px;font-size:.88rem;font-weight:600;border:2px solid #e5e5e5;border-radius:8px;background:#fff;cursor:pointer;transition:.15s;text-align:center}
.opt-btn:hover{border-color:#6d28d9;color:#6d28d9}
.opt-btn.correct{border-color:#16a34a;background:#f0fdf4;color:#16a34a}
.opt-btn.wrong{border-color:#dc2626;background:#fef2f2;color:#dc2626}
.quiz-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.quiz-score{font-family:'Fira Code',monospace;font-size:.82rem;color:#6d28d9;font-weight:500}
.quiz-btn{font-size:.78rem;font-weight:700;padding:8px 18px;border:2px solid #1a1a1a;border-radius:6px;background:#fff;cursor:pointer;transition:.15s}
.quiz-btn:hover{background:#1a1a1a;color:#fff}
.quiz-btn.primary{background:#6d28d9;color:#fff;border-color:#6d28d9}
.quiz-btn.primary:hover{background:#4c1d95}
.learn-section{padding:24px 0 40px}
.learn-section h2{font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:14px}
.font-card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:18px;margin-bottom:14px}
.font-card h3{font-size:1rem;font-weight:700;margin-bottom:4px}
.font-card .preview{font-size:1.5rem;padding:12px;background:#f5f3ef;border-radius:6px;margin:8px 0;text-align:center}
.font-card p{font-size:.84rem;color:#666;line-height:1.6}
.font-card .tags{font-family:'Fira Code',monospace;font-size:.62rem;color:#888;margin-top:6px}
footer{max-width:800px;margin:0 auto;padding:18px 20px;border-top:2px solid #1a1a1a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:.56rem;color:#aaa}
footer a{color:#888;text-decoration:none;margin-left:8px}
.lp{max-width:600px;margin:0 auto;padding:36px 20px 48px}
.lp h1{font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:4px}
.lp .dt{font-size:.62rem;color:#aaa;margin-bottom:18px}
.lp h2{font-size:.88rem;font-weight:700;margin:16px 0 5px}
.lp p,.lp li{font-size:.84rem;color:#666;margin-bottom:6px;line-height:1.65}
.lp ul{padding-left:16px}
@media(max-width:500px){.options{grid-template-columns:1fr}}