.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.5rem; padding: clamp(1.35rem, 4vw, 3rem); background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 75%, var(--surface)), var(--surface)); }
.hero::after { content: "ABC"; position: absolute; right: 2rem; top: -1rem; font-size: clamp(6rem, 14vw, 13rem); font-weight: 1000; opacity: .05; transform: rotate(-8deg); }
.hero h1 { font-size: clamp(2rem, 4.3vw, 4.2rem); max-width: 900px; }
.hero p { max-width: 760px; color: var(--text-soft); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-visual { display: grid; place-items: center; font-size: clamp(7rem, 15vw, 12rem); filter: drop-shadow(0 18px 18px rgba(37,99,235,.2)); }
.section-title { margin: 2rem 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lesson-hero { --lesson-color: var(--primary); position: relative; overflow: hidden; padding: clamp(1.2rem, 3vw, 2rem); border-top: 8px solid var(--lesson-color); }
.lesson-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: center; }
.lesson-icon-big { min-height: 220px; display: grid; place-items: center; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--lesson-color) 12%, var(--surface)); font-size: 8rem; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1.1rem; }
.category-card { padding: 1rem; }
.category-card h3 { color: var(--category-color, var(--primary)); }
.reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.reference-card { overflow: hidden; }
.reference-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.reference-card figcaption { padding: .85rem 1rem; font-weight: 800; }
.quiz-shell { max-width: 900px; margin-inline: auto; }
.quiz-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.quiz-question { padding: clamp(1.1rem, 3vw, 1.8rem); }
.quiz-feedback { margin-top: 1rem; padding: .9rem 1rem; border-radius: .9rem; background: var(--surface-2); }
.progress-list { display: grid; gap: .75rem; }
.progress-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .9rem 1rem; }
.architecture-diagram { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.arch-layer { padding: 1rem; border-radius: 1rem; background: var(--surface-2); border: 1px solid var(--border); }
.arch-layer strong { display: block; margin-bottom: .35rem; }
.reference-card img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: top; background: #fff; }
.reference-card-body { padding: .9rem 1rem 1rem; display: grid; gap: .7rem; }
.reference-card-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.reference-complete { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: 1rem; align-items: start; }
.reference-original { position: sticky; top: calc(var(--header-h) + 1rem); overflow: hidden; }
.reference-original img { width: 100%; height: auto; background: white; }
.reference-digital { display: grid; gap: 1rem; }
.reference-title-card { padding: 1.25rem; border-top: 7px solid var(--lesson-color, var(--primary)); }
.reference-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.reference-category { padding: .9rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-2); }
.reference-examples { display: grid; gap: .55rem; }
.reference-notice { padding: .8rem 1rem; border-radius: .9rem; background: var(--surface-3); color: var(--text); }
.practice-intro { margin-bottom: 1rem; }
.practice-toolbar { align-items: end; }
.practice-toolbar label { display: grid; gap: .35rem; min-width: min(100%, 280px); }
.practice-toolbar select { width: 100%; }
.quiz-level-name { color: var(--primary-strong); }
.progress-level-summary { margin-top: .45rem; }
.reference-modal { width: min(1500px, 100%); max-height: 92vh; }
.reference-modal .modal-head { z-index: 3; }
.reference-modal-backdrop { padding-top: 3vh; }
.reference-digital-cover { min-height: 440px; display: grid; place-items: center; align-content: center; gap: .6rem; padding: 2rem; text-align: center; background: radial-gradient(circle at top, #fff7c7, #eef4ff 58%, #e8ddff); color: #172554; }
.reference-digital-cover span { font-size: clamp(5rem, 12vw, 9rem); }
.reference-digital-cover strong { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4.4rem); }
.reference-digital-cover small { font-size: 1rem; font-weight: 800; }
.reference-card-cover { min-height: 0; aspect-ratio: 3 / 4; }