@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root { --ink:#123b60; --rose:#0b6ea8; --cream:#f3f8fc; --paper:#ffffff; --line:#d6e4ef; --muted:#587287; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'DM Sans',sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; }
header { height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 clamp(22px,7vw,108px); gap:25px; }
.logo { font-size:22px; font-weight:700; letter-spacing:-1px; text-decoration:none; color:var(--ink); }
.logo span, em { color:var(--rose); }
header p { margin:auto; font:10px 'DM Mono'; letter-spacing:1.2px; color:var(--muted); }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#c8dcd3; font-size:10px; font-weight:bold; }
.review-banner { padding:12px 22px; background:#e7f1f8; color:#315a74; font-size:13px; display:flex; gap:9px; align-items:center; justify-content:center; }
.review-banner span { color:var(--rose); font-size:17px; }
.review-banner a { color:var(--ink); font-weight:600; }
.page-head { max-width:1160px; margin:0 auto; padding:55px 30px 34px; display:flex; align-items:end; justify-content:space-between; }
.kicker { font:500 10px 'DM Mono'; letter-spacing:1.25px; color:#9b7362; }
.page-head h1 { font:700 48px/1 Fraunces; margin:14px 0 0; letter-spacing:-2px; }
.page-head em { font-style:italic; }
.region-tabs { max-width:1160px; margin:0 auto 18px; padding:0 30px; display:flex; gap:8px; flex-wrap:wrap; }
.species-tabs { max-width:1160px; margin:0 auto 12px; padding:0 30px; display:flex; gap:8px; flex-wrap:wrap; }
.species-tabs button { border:1px solid var(--line); background:#e5f1f8; border-radius:20px; padding:8px 13px; font-size:12px; }
.species-tabs button.active { background:var(--rose); color:#fff; border-color:var(--rose); }
.region-tabs button { border:1px solid var(--line); background:var(--paper); border-radius:20px; padding:8px 13px; font-size:12px; }
.region-tabs button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.progress { width:190px; font:10px 'DM Mono'; color:var(--muted); }
.progress i { height:5px; background:#eadfd3; border-radius:3px; display:block; margin-top:9px; overflow:hidden; }
.progress b { display:block; height:100%; background:var(--rose); }
.game { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:310px 1fr; min-height:515px; background:var(--paper); border:1px solid var(--line); }
.challenge { padding:52px 38px; border-right:1px solid var(--line); }
.challenge h2 { font:700 36px/1.05 Fraunces; margin:14px 0 5px; letter-spacing:-1px; }
.challenge>i { font:12px 'DM Mono'; color:#a17a6a; }
.challenge>p { line-height:1.5; color:var(--muted); font-size:14px; margin:25px 0; }
.stats { display:flex; gap:26px; padding:13px 0; border-block:1px solid var(--line); font:10px 'DM Mono'; letter-spacing:.5px; color:#9c8074; }
.stats strong { display:block; color:var(--ink); font:700 19px Fraunces; margin-top:4px; }
.message { margin-top:24px; padding:13px; font-size:12px; line-height:1.4; }
.message b { display:block; margin-bottom:3px; }
.message.hint { background:#f8eee1; }.message.hint b { color:var(--rose); }
.message.success { background:#e7f1eb; }.message.success b { color:#267457; }
.message.error { background:#fae9e1; }.message.error b { color:#bd513f; }
.message button { display:block; background:none; border:0; text-decoration:underline; font-weight:700; margin-top:8px; padding:0; }
.catalog-note { font-size:11px!important; color:#9c8074!important; margin-top:18px!important; }
.canvas { position:relative; min-height:513px; background:#f5ecdf; overflow:hidden; display:grid; place-items:center; }
.anatomy-stage { position:relative; width:min(96%,760px); aspect-ratio:3/2; }
.anatomy-stage.portrait { width:min(70%,350px); aspect-ratio:2/3; }
.anatomy-stage img { width:100%; height:100%; object-fit:contain; display:block; }
.canvas>p { position:absolute; right:23px; top:10px; font:10px 'DM Mono'; letter-spacing:1px; color:#a18a78; }
.answers { position:absolute; z-index:2; left:50%; bottom:25px; transform:translateX(-50%); display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(88%,510px); }
.answer-choice { background:rgba(255,253,250,.98); border:1px solid #d7c5b5; border-radius:5px; padding:13px; text-align:left; box-shadow:0 3px 10px #7f675833; transition:.15s ease; }
.answer-choice:hover { border-color:var(--rose); color:var(--rose); transform:translateY(-2px); }
.answer-choice.chosen { background:#e7f1eb; border-color:#34916e; }
.answer-choice span { display:block; font:12px 'DM Mono'; }
.answer-choice small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
footer { max-width:1160px; margin:0 auto; padding:18px 0; display:flex; justify-content:space-between; font:10px 'DM Mono'; letter-spacing:1px; color:var(--muted); }
footer button { border:0; background:transparent; font:600 12px 'DM Sans'; color:var(--ink); }
.study-panel { max-width:1160px; margin:0 auto 34px; padding:34px 30px 0; }
.study-title { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.study-title h2 { font:700 34px Fraunces; margin:10px 0 6px; }
.study-title p { color:var(--muted); margin:0; font-size:14px; }
.study-status { background:#fff2d7; color:#8a6432; border-radius:20px; padding:8px 12px; font:10px 'DM Mono'; letter-spacing:.7px; }
.study-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 18px; }
.study-tabs button { border:1px solid var(--line); background:var(--paper); border-radius:5px; padding:11px 14px; font-size:12px; display:flex; align-items:center; gap:8px; }
.study-tabs button span { color:var(--rose); font-size:16px; }.study-tabs button.active { background:var(--ink); color:white; border-color:var(--ink); }
.study-content { display:grid; grid-template-columns:1.4fr .8fr; gap:16px; }
.theory-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.theory-card { background:var(--paper); border:1px solid var(--line); padding:16px; border-radius:5px; }
.theory-card span { font:600 12px 'DM Mono'; color:var(--rose); }.theory-card p { font-size:13px; color:var(--muted); line-height:1.45; margin:8px 0 0; }
.study-quiz { background:var(--ink); color:white; border-radius:5px; padding:22px; align-self:stretch; }.quiz-head span { font:10px 'DM Mono'; color:#8bc5e6; letter-spacing:1px; }.quiz-head b { display:block; margin-top:13px; font:600 20px Fraunces; line-height:1.15; }.quiz-options { display:grid; gap:8px; margin-top:22px; }.quiz-options button { text-align:left; border:1px solid #547995; color:white; background:#234f70; border-radius:4px; padding:11px; font-size:12px; }.quiz-options button:hover { background:#0b6ea8; }.quiz-feedback { font-size:12px; margin:14px 0 0; }.quiz-feedback.ok { color:#94ddb8; }.quiz-feedback.no { color:#ffb6a8; }
.lead { max-width:560px; color:var(--muted); margin:12px 0 0; font-size:15px; line-height:1.5; }
.module-tabs { max-width:1160px; margin:0 auto 18px; padding:0 30px; }
.main-study { max-width:1160px; margin:0 auto; padding:0 30px; }
.game-card { min-height:100%; display:flex; flex-direction:column; }
.game-feedback { margin-top:16px; font-size:12px; line-height:1.5; }.game-feedback.ok { color:#94ddb8; }.game-feedback.no { color:#ffb6a8; }
.game-feedback button { display:block; margin-top:14px; border:1px solid #8bc5e6; background:#0b6ea8; color:white; border-radius:4px; padding:10px 12px; font-size:12px; }
.mode-switch { max-width:1160px; margin:0 auto 16px; padding:0 30px; display:flex; gap:8px; }.mode-switch button { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:20px; padding:9px 14px; font-size:12px; }.mode-switch button.active { background:var(--rose); border-color:var(--rose); color:#fff; }
.text-game { max-width:1160px; margin:0 auto; padding:0 30px; display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; }.module-intro { background:#eaf4f8; border:1px solid var(--line); padding:28px; }.module-intro h2 { font:700 31px Fraunces; margin:10px 0 6px; }.module-intro p { color:var(--muted); font-size:13px; line-height:1.5; }.study-card { background:var(--paper); border:1px solid var(--line); padding:34px; min-height:260px; }.study-card h2 { font:700 30px Fraunces; margin:18px 0 12px; }.study-card p { color:var(--muted); font-size:16px; line-height:1.65; max-width:620px; }.card-actions { display:flex; gap:8px; margin-top:28px; }.card-actions button { border:1px solid var(--line); background:#e5f1f8; padding:10px 13px; border-radius:4px; font-size:12px; }.text-game .study-quiz { min-height:260px; }
@media (max-width:720px) { header { padding:0 20px; } header p { display:none; } .review-banner { text-align:center; font-size:11px; } .page-head { padding:40px 20px 25px; align-items:start; gap:24px; flex-direction:column; } .page-head h1 { font-size:41px; } footer { margin:0 20px; } .progress { width:100%; } .main-study,.module-tabs,.mode-switch,.text-game { padding-left:20px; padding-right:20px; } .text-game { grid-template-columns:1fr; } }