.d6-page { background: radial-gradient(circle at 92% 2%, rgba(196,230,110,.22), transparent 29rem), var(--paper); }
.d6-shell { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.d6-hero { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,6vw,72px); align-items:center; padding:48px 0 56px; }
.d6-hero h1 { font-size:clamp(2.7rem,6.6vw,5.7rem); }
.d6-hero p { max-width:690px; color:var(--muted); font-size:1.12rem; }
.d6-logo-panel { padding:28px; border:1px solid rgba(20,43,54,.08); border-radius:30px; background:rgba(255,255,255,.74); box-shadow:var(--shadow); }
.d6-logo-panel img { width:100%; height:auto; }
.mode-note { margin-top:16px; padding:14px 16px; border-left:4px solid var(--lime-dark); border-radius:12px; background:#f3fadf; color:#34450c; font-weight:750; }
.area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.area-card { display:flex; min-height:330px; flex-direction:column; padding:28px; border:1px solid rgba(20,43,54,.1); border-radius:24px; background:#fff; text-decoration:none; box-shadow:0 12px 30px rgba(20,43,54,.07); transition:transform .2s,box-shadow .2s; }
.area-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.area-card .area-icon { display:grid; place-items:center; width:54px; aspect-ratio:1; border-radius:17px; font-size:1.35rem; font-weight:950; }
.area-card.fable .area-icon { background:#f3e6dc; color:#8b4d2e; }
.area-card.grammar .area-icon { background:#e5f3f2; color:#0d6968; }
.area-card.spelling .area-icon { background:#eff8d5; color:#54720e; }
.area-card h2 { margin:34px 0 10px; font-size:1.65rem; }
.area-card p { color:var(--muted); }
.area-card ul { padding-left:20px; color:var(--muted); font-size:.93rem; }
.area-card strong { margin-top:auto; color:var(--navy); }
.progress-panel { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; margin:28px 0; padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.progress-panel h2 { margin-bottom:6px; }
.progress-panel p { margin:0; color:var(--muted); }
.progress-badge { min-width:100px; padding:14px; border-radius:16px; background:var(--navy); color:#fff; text-align:center; font-weight:900; }
.progress-badge span { display:block; color:var(--lime); font-size:1.7rem; }
.section-tabs { position:sticky; top:8px; z-index:20; display:flex; gap:7px; margin:0 auto 32px; padding:8px; overflow:auto; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 8px 28px rgba(20,43,54,.08); }
.section-tabs a { flex:0 0 auto; padding:9px 13px; border-radius:10px; color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:850; }
.section-tabs a:hover,.section-tabs a:focus-visible { color:var(--navy); background:#eff8d5; outline:none; }
.learn-section { padding:66px 0 12px; scroll-margin-top:80px; }
.learn-section>header { max-width:800px; margin-bottom:26px; }
.learn-section>header p { color:var(--muted); }
.learn-section h2 { font-size:clamp(2rem,4.4vw,3.4rem); letter-spacing:-.04em; }
.concept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.concept-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.concept-card h3 { margin-bottom:8px; }
.concept-card p { color:var(--muted); }
.question-chip { display:inline-flex; padding:5px 9px; border-radius:999px; background:#eff8d5; color:#455d0c; font-size:.78rem; font-weight:900; }
.warning { padding:18px 20px; border-left:5px solid #b96a36; border-radius:14px; background:#fff1e6; }
.level-bar { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.level-button { padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--muted); font-weight:850; cursor:pointer; }
.level-button.active { border-color:var(--lime-dark); color:var(--navy); background:#eff8d5; }
.trainer { padding:clamp(22px,4vw,34px); border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 12px 32px rgba(20,43,54,.06); }
.quiz-list { display:grid; gap:18px; }
.trainer-top { display:flex; justify-content:space-between; gap:18px; align-items:start; }
.trainer-label { color:var(--lime-dark); font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.trainer h3 { margin:8px 0 16px; font-size:1.35rem; }
.trainer-options { display:grid; gap:9px; margin:16px 0; }
.trainer-option { display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.trainer-option:hover { background:var(--paper); }
.trainer-option input { margin-top:5px; accent-color:var(--lime-dark); }
.trainer-input { width:100%; min-height:48px; padding:10px 13px; border:1px solid var(--line); border-radius:11px; }
.trainer-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.trainer-actions button { min-height:44px; padding:9px 14px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--navy); font-weight:850; cursor:pointer; }
.trainer-actions .primary { border-color:var(--navy); background:var(--navy); color:#fff; }
.trainer-feedback { display:none; margin-top:16px; padding:15px 17px; border-radius:13px; }
.trainer-feedback.show { display:block; }
.trainer-feedback.good { background:#edf8dc; color:#34450c; }
.trainer-feedback.try { background:#fff1e6; color:#743a1d; }
.hint-box { display:none; margin-top:12px; padding:13px 15px; border-radius:12px; background:#eaf4f3; color:#164f51; }
.hint-box.show { display:block; }
.analysis-tool { padding:24px; border:1px solid var(--line); border-radius:22px; background:#fff; }
.sentence-parts { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.sentence-part { padding:10px 12px; border:2px solid transparent; border-radius:11px; background:var(--paper); cursor:pointer; font-weight:800; }
.sentence-part.selected { border-color:var(--lime-dark); background:#eff8d5; }
.sentence-part.solved { background:#e5f3f2; color:#0d5c5b; }
.analysis-controls { display:flex; flex-wrap:wrap; gap:9px; }
.analysis-controls select,.analysis-controls button { min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.writing-step { margin:16px 0; padding:22px; border:1px solid var(--line); border-radius:19px; background:#fff; }
.writing-step h3 { margin-bottom:8px; }
.writing-step textarea,.writing-step input,.writing-step select { width:100%; margin-top:8px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; }
.writing-step textarea { min-height:120px; resize:vertical; }
.help-details { margin-top:12px; padding:12px 14px; border-radius:11px; background:#f3fadf; }
.help-details summary { cursor:pointer; font-weight:850; }
.criteria-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:16px; }
.criteria-grid label { display:flex; gap:9px; padding:12px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.topic-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.topic-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.soon,.topic-card .soon { display:inline-flex; padding:5px 9px; border-radius:999px; background:#fff1e6; color:#743a1d; font-size:.76rem; font-weight:900; }
.test-panel { margin:38px 0 74px; padding:clamp(28px,5vw,52px); border-radius:28px; background:var(--navy); color:#fff; }
.test-panel p { color:#d6e1e4; }
.test-panel .button { background:var(--lime); color:var(--navy); }
@media(max-width:900px){.d6-hero,.area-grid{grid-template-columns:1fr}.d6-logo-panel{max-width:560px}.concept-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.d6-shell{width:min(100% - 22px,1120px)}.concept-grid,.topic-list,.criteria-grid{grid-template-columns:1fr}.progress-panel{grid-template-columns:1fr}.trainer-top{display:block}.d6-hero{padding-top:28px}.area-card{min-height:auto}}