:root{
  --paper:#f3ead8; --paper2:#e8dcc5; --ink:#25352f; --muted:#6f786f;
  --accent:#b45d3a; --line:#c7b99f; --card:#fbf7ed; --ok:#2f6b4f; --bad:#9b493d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif;min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#8e7b63 .6px,transparent .6px);background-size:8px 8px}
.map-lines{position:fixed;inset:0;pointer-events:none;opacity:.18;background:
linear-gradient(20deg,transparent 48%,var(--line) 49%,transparent 50%) 0 0/240px 180px,
linear-gradient(110deg,transparent 48%,var(--line) 49%,transparent 50%) 70px 30px/300px 220px}
.app{max-width:860px;margin:auto;padding:28px 18px 42px;position:relative}
header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.brand{display:flex;gap:14px;align-items:flex-start}.compass{font-size:36px;color:var(--accent);line-height:1}
.eyebrow{font:700 11px/1.2 Arial,sans-serif;letter-spacing:.18em;color:var(--accent);margin-bottom:7px}
h1{margin:0;font-size:clamp(36px,8vw,66px);line-height:.88;font-weight:500;letter-spacing:-.04em}
.icon-btn{background:transparent;border:1px solid var(--line);border-radius:50%;width:42px;height:42px;font-size:22px;color:var(--ink)}
.journey{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0 16px;margin-bottom:16px}
.journey-top{display:flex;justify-content:space-between;font:12px Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.route{height:5px;background:#d7cbb5;border-radius:99px;margin:10px 0 12px;overflow:hidden}.route>div{height:100%;width:0;background:var(--accent);transition:.3s}
.chapters{display:flex;gap:7px;flex-wrap:wrap}.chip,.mode{border:1px solid var(--line);background:rgba(255,255,255,.25);color:var(--ink);border-radius:99px;padding:8px 12px;cursor:pointer}
.chip.active,.mode.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.mode{border-radius:14px;text-align:left;font:700 13px Arial,sans-serif;padding:12px}.mode span{display:block;font-size:10px;opacity:.65;margin-bottom:5px}
.card{background:rgba(251,247,237,.94);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 12px 40px rgba(65,53,38,.08)}
.card-meta{display:flex;justify-content:space-between;gap:8px;font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.task-label{font:700 11px Arial,sans-serif;letter-spacing:.16em;color:var(--accent);margin:26px 0 12px}
.prompt{font-size:clamp(23px,4.8vw,34px);line-height:1.25;min-height:88px}
.hint{font:14px/1.5 Arial,sans-serif;color:var(--muted);margin:10px 0 16px}
textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:14px;background:#fffaf0;color:var(--ink);padding:14px;font:18px/1.4 Arial,sans-serif;outline:none}
textarea:focus{border-color:var(--accent)}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
button{cursor:pointer}.primary,.secondary{padding:11px 16px;border-radius:12px;font:700 14px Arial,sans-serif}
.primary{border:0;background:var(--accent);color:white}.secondary{border:1px solid var(--line);background:transparent;color:var(--ink)}
.feedback{border-top:1px solid var(--line);margin-top:18px;padding-top:18px;font:16px/1.5 Arial,sans-serif}
.feedback-title{font-weight:800;margin-bottom:6px}.model{background:#efe4cf;border-radius:12px;padding:12px;margin-top:12px}
.model span{display:block;font:700 10px Arial,sans-serif;letter-spacing:.12em;color:var(--muted);margin-bottom:5px}
.grammar{margin-top:10px;padding:10px 12px;border-left:3px solid var(--accent);background:#f3ead8}
.next{margin-top:14px;width:100%}.hidden{display:none!important}
.choices{display:grid;gap:9px;margin-top:12px}.choice{border:1px solid var(--line);border-radius:13px;background:#fffaf0;padding:12px;text-align:left;font:16px Arial,sans-serif}.choice:hover{border-color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.stats div{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.22)}
.stats strong{display:block;font-size:26px}.stats span{font:11px Arial,sans-serif;text-transform:uppercase;color:var(--muted)}
footer{text-align:center;margin-top:20px;color:var(--muted);font:11px Arial,sans-serif}
@media(max-width:650px){.modes{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.card{padding:18px}.prompt{min-height:70px}}