.hero { padding: clamp(1.5rem, 5vw, 3.5rem); border-radius: 14px; background: linear-gradient(125deg, var(--surface), color-mix(in srgb, var(--accent) 9%, var(--surface))); border:1px solid var(--border); box-shadow:var(--shadow); }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.8rem; }
h1, h2, h3 { line-height:1.25; }
h1, h2 { font-family:var(--serif); }
h1 { font-size:clamp(2rem, 5vw, 3.25rem); margin:.25rem 0 1rem; }
h2 { font-size:clamp(1.45rem, 3vw, 2rem); margin:2rem 0 .75rem; }
.lead { max-width:70ch; color:var(--text-muted); font-size:1.1rem; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem; margin:1.25rem 0; }
.card, .callout, .notice { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.15rem; box-shadow:var(--shadow); }
.card h2, .card h3 { margin-top:0; }
.card p:last-child { margin-bottom:0; }
.callout { margin:1.25rem 0; border-left:5px solid var(--accent); }
.callout h3 { margin:0 0 .5rem; font:700 1rem var(--sans); }
.callout[data-kind="tambahan"] { border-left-color:var(--accent-2); background:color-mix(in srgb,var(--accent-2) 8%,var(--surface)); }
.callout[data-kind="awas"] { border-left-color:var(--warn); }
.callout[data-kind="definisi"], .callout[data-kind="teorema"] { border-left-color:var(--accent); }
.callout[data-kind="contoh"] { border-left-color:var(--ok); }
.badge { display:inline-block; border:1px solid var(--border); border-radius:999px; padding:.1rem .55rem; color:var(--text-muted); font-size:.78rem; }
.button, button.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.55rem .9rem; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:var(--bg); text-decoration:none; cursor:pointer; }
.button.secondary { color:var(--accent); background:transparent; }
.button-row { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.25rem; }
.notice { border-left:5px solid var(--warn); }
.notice[role="status"] { border-color:var(--accent); }
.module-body { max-width:72ch; font:1.05rem/1.75 var(--serif); }
.module-body h2, .module-body h3 { font-family:var(--sans); }
.module-body table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; font: .9rem/1.5 var(--sans); }
.module-body th, .module-body td { border:1px solid var(--border); padding:.5rem .7rem; text-align:left; }
.module-body th { background:var(--surface); }
.module-body pre { overflow:auto; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:6px; font: .9rem/1.5 var(--mono); }
.module-body code { font-family:var(--mono); }
.module-body img { max-width:100%; height:auto; }
.module-body .katex-display { overflow-x:auto; overflow-y:hidden; padding:.35rem 0; }
.module-body blockquote { margin:1rem 0; padding:.2rem 1rem; border-left:3px solid var(--border); color:var(--text-muted); }
.module-body details { margin:.5rem 0; padding:.6rem .8rem; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.module-body summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; }
.module-body hr { border:0; border-top:1px solid var(--border); }
.inline-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; margin:1rem 0; }
.inline-form label { display:grid; gap:.25rem; }
.inline-form input, .inline-form select { min-height:44px; padding:.5rem; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.progress-track { height:.55rem; overflow:hidden; border-radius:1rem; background:var(--border); }
.progress-track span { display:block; height:100%; background:var(--accent); }
.home-progress { max-width:52rem; margin:2rem 0 2.5rem; }
.outcome-card h3 { font-size:1rem; overflow-wrap:anywhere; }
.card-meta { color:var(--text-muted); font-size:.86rem; }
.compact-card { padding:.75rem; box-shadow:none; }
.compact-card h3 { font-size:.95rem; }
.filter-form { align-items:end; padding:1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.filter-form button { min-height:44px; }
.module-card-grid { margin-top:1.5rem; }
.table-scroll { width:100%; overflow-x:auto; margin:1rem 0 1.5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.table-scroll table { width:100%; min-width:32rem; border-collapse:collapse; }
.table-scroll th, .table-scroll td { padding:.7rem .85rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.table-scroll thead th { position:sticky; top:0; background:var(--surface); }
.mapping-table td { text-align:center; font-weight:700; }
.cpmk-detail { margin:1rem 0; }
.reference-list { padding-left:1.5rem; }
.reference-item { padding:.5rem; scroll-margin-top:2rem; }
.text-link { display:inline-flex; align-items:center; min-height:44px; padding:.25rem .15rem; color:var(--accent); text-decoration:underline; }
.module-reader-grid { display:grid; grid-template-columns:minmax(150px, 190px) minmax(0, 1fr) minmax(160px, 210px); grid-template-areas:"modules article toc" "pagination pagination pagination"; align-items:start; gap:1.25rem; }
.module-article { grid-area:article; min-width:0; }
.module-article > h1 { margin-top:.3rem; }
.module-list-aside { grid-area:modules; position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto; }
.toc-aside { grid-area:toc; position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto; }
.reader-disclosure { padding:.35rem .5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.reader-disclosure summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; }
.reader-module-list, .toc-list { margin:.5rem 0; padding-left:1.15rem; }
.reader-module-list li, .toc-list li { margin:.35rem 0; }
.reader-module-list a[aria-current="page"] { font-weight:800; text-decoration-thickness:2px; }
.toc-subitem { margin-left:.7rem!important; font-size:.9rem; }
.module-pagination { grid-area:pagination; display:flex; justify-content:space-between; gap:1rem; margin:1.5rem 0; padding-top:1rem; border-top:1px solid var(--border); }
.module-controls { margin-top:1.5rem; }
.module-note { margin:2rem 0 1rem; padding:1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.module-note h2 { margin-top:0; }
.module-note label { display:grid; gap:.4rem; margin:1rem 0; font-weight:700; }
.module-note textarea { width:100%; min-height:8rem; padding:.65rem; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font:inherit; resize:vertical; }
.note-status { min-height:1.5em; }
.reading-progress { position:sticky; z-index:4; top:0; height:5px; margin:-1rem 0 1rem; background:var(--border); }
.reading-progress span { display:block; height:100%; width:0; background:var(--accent-2); transition:width .12s linear; }
.code-block { position:relative; padding-top:3rem!important; }
.copy-button { position:absolute; top:.45rem; right:.45rem; min-height:36px; padding:.3rem .65rem; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--text); font-size:.8rem; cursor:pointer; }
.resume-reading { margin-bottom:1rem; }
.quiz-form { display:grid; gap:1rem; }
.quiz-question { min-width:0; margin:0; }
.quiz-question legend { max-width:100%; padding:0 .35rem; font-weight:750; }
.quiz-option { display:flex; align-items:flex-start; gap:.55rem; min-height:44px; margin:.35rem 0; padding:.55rem .65rem; border:1px solid var(--border); border-radius:6px; cursor:pointer; }
.quiz-option:hover { background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.quiz-option input { width:1.1rem; height:1.1rem; margin:.12rem 0 0; accent-color:var(--accent); flex:0 0 auto; }
.quiz-short-answer { display:grid; gap:.35rem; }
.quiz-short-answer input { min-height:44px; padding:.5rem .65rem; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.quiz-results { margin-top:1rem; }
.quiz-pass { border-left-color:var(--ok); }
.quiz-retry { border-left-color:var(--warn); }
.answer-correct { border-left:5px solid var(--ok); }
.answer-incorrect { border-left:5px solid var(--err); }
.answer-review { margin:1rem 0; }
.answer-review h3 { margin-top:0; font-size:1rem; }
.progress-transfer { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.file-button { position:relative; overflow:hidden; cursor:pointer; }
.file-button input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.transfer-feedback { min-height:2.5rem; }
.glossary-list { display:grid; gap:1rem; margin-top:1rem; }
.glossary-term { scroll-margin-top:1rem; }
.glossary-term h2 { margin-top:0; }
.term-translation { color:var(--text-muted); font-style:italic; }
.term-modules { padding-left:1.3rem; }
.glossary-empty { margin-top:1rem; }
.flashcard { max-width:44rem; min-height:14rem; margin:1.5rem 0; display:grid; align-content:center; gap:.75rem; }
.flashcard h2 { margin:.25rem 0; }
.flashcard > p { margin:0; }
.glossary-tooltip { position:relative; display:inline; }
.glossary-tooltip > a { text-decoration-style:dotted; text-underline-offset:.2em; }
.glossary-tooltip-content { position:absolute; z-index:8; left:0; bottom:calc(100% + .45rem); width:min(24rem, calc(100vw - 2rem)); padding:.65rem .8rem; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); font: .9rem/1.45 var(--sans); opacity:0; visibility:hidden; pointer-events:none; }
.glossary-tooltip:hover .glossary-tooltip-content,
.glossary-tooltip:focus-within .glossary-tooltip-content { opacity:1; visibility:visible; }
.search-results { margin-top:1.5rem; }
.search-result h3 { margin-top:0; }
.compact-notice { font-size:.86rem; }
.demo-placeholder { margin:1rem 0; }
.demo-placeholder.demo-mounted { display:block; padding:1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.demo-widget { display:grid; gap:.8rem; }
.demo-widget > p { margin:.2rem 0; }
.pattern-grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); gap:1rem; }
.pattern-grid-card { min-width:0; }
.pattern-grid-card h5 { margin:.2rem 0 .5rem; font-size:.9rem; }
.pattern-grid { display:grid; grid-template-columns:repeat(4, minmax(2.75rem,3rem)); gap:.25rem; }
.pattern-grid-cell { display:grid; place-items:center; min-width:2.75rem; min-height:2.75rem; padding:0; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--text-muted); font: .85rem var(--mono); }
button.pattern-grid-cell { cursor:pointer; }
button.pattern-grid-cell.is-on { background:var(--accent); color:var(--bg); font-weight:800; }
.pattern-grid-result, .fruit-likelihood-result { margin:.25rem 0; padding:.65rem .8rem; border-left:4px solid var(--accent-2); background:var(--bg); }
.fruit-diameter-label { font-weight:700; }
.fruit-diameter-label + input[type="range"] { width:min(100%,34rem); min-height:2.5rem; accent-color:var(--accent); }
.demo-widget svg { display:block; width:100%; height:auto; max-height:20rem; overflow:visible; }
.demo-widget svg text { font-family:var(--sans); }
@media(max-width:1000px) {
 .module-reader-grid { grid-template-columns:minmax(0,1fr) minmax(180px,230px); grid-template-areas:"article toc" "article modules" "pagination pagination"; }
 .module-list-aside, .toc-aside { top:.5rem; }
}
@media(max-width:700px) {
 .module-reader-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"article" "modules" "toc" "pagination"; }
 .module-list-aside, .toc-aside { position:static; max-height:none; }
 .toc-aside .reader-disclosure { background:var(--surface); }
 .module-pagination { flex-direction:column; }
 .reading-progress { margin-left:-1rem; margin-right:-1rem; }
}
@media(max-width:600px) { .module-body { font-size:1rem; } }