:root{--cn-navy:#071a3d;--cn-blue:#123b75;--cn-gold:#f2c14e;--cn-ink:#17233b;--cn-muted:#607087;--cn-line:#dbe4ef;--cn-bg:#f4f7fc}
.cn-notes{color:var(--cn-ink);font-family:Inter,Arial,sans-serif}
.cn-notes .hero{background:linear-gradient(130deg,var(--cn-navy),var(--cn-blue));color:#fff;padding:38px 5%;border-bottom:5px solid var(--cn-gold)}
.cn-notes .wrap{max-width:1220px;margin:auto}
.cn-notes .hero h1{font-size:clamp(30px,4vw,48px);margin:8px 0}
.cn-notes .hero p{max-width:850px;color:#e2eafa;line-height:1.7}
.cn-notes .crumb{background:#fff;padding:12px 5%;border-bottom:1px solid var(--cn-line);font-size:13px}
.cn-notes .crumb a{color:var(--cn-blue);font-weight:800}
.cn-notes .layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;max-width:1220px;margin:26px auto;padding:0 18px}
.cn-notes .filters,.cn-notes .reader,.cn-notes .catalogue{background:#fff;border:1px solid var(--cn-line);border-radius:14px;box-shadow:0 5px 18px #071a3d0a}
.cn-notes .filters{padding:18px;height:max-content;position:sticky;top:15px}
.cn-notes label{display:block;font-weight:800;font-size:13px;margin:13px 0 6px}
.cn-notes input,.cn-notes select{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--cn-ink);font:inherit}
.cn-notes .filter-note{font-size:12px;color:var(--cn-muted);line-height:1.5}
.cn-notes .reader{padding:clamp(18px,3vw,32px);min-height:520px}
.cn-notes .reader h2{font-size:clamp(24px,3vw,34px);color:var(--cn-navy);margin:0 0 8px}
.cn-notes .reader h3{color:var(--cn-blue);margin:24px 0 8px}
.cn-notes .reader p,.cn-notes .reader li{line-height:1.75}
.cn-notes .reader .meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}
.cn-notes .tag{background:#edf3fb;color:#123b75;border-radius:99px;padding:5px 10px;font-size:12px;font-weight:800}
.cn-notes .outcomes,.cn-notes .worked,.cn-notes .exam-tip{padding:15px 17px;border-radius:10px;margin:16px 0;background:#f4f7fc;border-left:4px solid var(--cn-blue)}
.cn-notes .worked{background:#fff8e8;border-color:var(--cn-gold)}
.cn-notes .diagram{margin:18px 0;padding:12px;border:1px solid var(--cn-line);border-radius:12px;background:#fbfdff;overflow-x:auto}
.cn-notes .diagram svg{display:block;width:100%;max-width:100%;height:auto;min-height:150px;margin:auto;overflow:visible}.cn-notes .diagram strong{display:block;color:var(--cn-navy);font-size:16px;margin:2px 0 10px}.cn-notes .diagram p{font-size:13px;line-height:1.65;color:var(--cn-muted)}.cn-notes .diagram{overflow-x:auto}.cn-notes .diagram svg text{font-family:Arial,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:.25px}@media(max-width:600px){.cn-notes .diagram svg{min-width:560px}}
.cn-notes .test{border-top:1px solid var(--cn-line);margin-top:26px;padding-top:16px}
.cn-notes .question{padding:12px 0;border-bottom:1px solid #e8edf4}
.cn-notes .question label{margin:0 0 8px}
.cn-notes .answer{display:none;color:#14532d;background:#f0fdf4;padding:10px;border-radius:8px;margin-top:8px}
.cn-notes .answer.show{display:block}
.cn-notes button,.cn-notes .subject-link{border:0;border-radius:8px;padding:10px 13px;background:var(--cn-navy);color:#fff;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.cn-notes button.secondary{background:#e8eef7;color:var(--cn-navy)}
.cn-notes .catalogue{padding:20px;margin:0 18px 30px}
.cn-notes .catalogue h2{color:var(--cn-navy)}
.cn-notes .subject-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.cn-notes .subject-link{background:#f7f9fc;border:1px solid var(--cn-line);color:var(--cn-navy);text-align:left}
.cn-notes .subject-link small{display:block;color:var(--cn-muted);font-weight:500;margin-top:4px}
.cn-notes .status{font-size:13px;color:var(--cn-muted);margin:10px 0}
.cn-notes .notice{background:#fff8e8;border:1px solid #f2dfaa;border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.6;margin:14px 0}
.cn-notes footer{background:var(--cn-navy);color:#dce8fa;text-align:center;padding:25px;margin-top:35px}
@media(max-width:800px){.cn-notes .layout{grid-template-columns:1fr}.cn-notes .filters{position:static}.cn-notes .catalogue{margin-left:12px;margin-right:12px}}

/* Guided deep-learning layer */
.cn-notes .deep-guide{margin:20px 0;padding:18px;border:1px solid #cbd8ea;border-radius:13px;background:#f8fbff}
.cn-notes .deep-guide>h3{margin:0 0 8px;color:var(--cn-navy)}
.cn-notes .deep-guide h4{margin:10px 0;color:var(--cn-blue);font-size:15px}
.cn-notes .deep-guide p,.cn-notes .deep-guide li{font-size:14px;line-height:1.7}
.cn-notes .deep-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cn-notes .deep-columns>div,.cn-notes .deep-task{background:#fff;border:1px solid var(--cn-line);border-radius:10px;padding:12px;margin-top:12px}
.cn-notes .deep-guide ol{padding-left:22px}
.cn-notes .deep-guide li{margin:7px 0}
.cn-notes .deep-guide li span{display:block;color:var(--cn-muted);font-size:13px}
.cn-notes .deep-task ul{padding-left:22px}
@media(max-width:650px){.cn-notes .deep-columns{grid-template-columns:1fr}}

/* Multilingual script and direction support */
.cn-notes .reader[dir="rtl"]{text-align:right;direction:rtl;font-family:"Noto Naskh Arabic","Noto Sans Arabic","Noto Nastaliq Urdu",Tahoma,Arial,sans-serif}
.cn-notes .reader[dir="rtl"] .meta{justify-content:flex-start}
.cn-notes .reader[dir="rtl"] .outcomes,.cn-notes .reader[dir="rtl"] .worked,.cn-notes .reader[dir="rtl"] .exam-tip{border-left:0;border-right:4px solid var(--cn-blue)}
.cn-notes .reader[data-script="cjk"]{font-family:"Noto Sans CJK SC","Noto Sans CJK JP","Microsoft YaHei","Yu Gothic",sans-serif}
.cn-notes .reader[data-script="indic"]{font-family:"Noto Sans Devanagari","Mangal","Nirmala UI",sans-serif}
.cn-notes .reader[data-script="thai"]{font-family:"Noto Sans Thai","Leelawadee UI",sans-serif}
.cn-notes .language-intro{padding:18px;border:1px solid var(--cn-line);border-radius:12px;background:#f8fbff}
.cn-notes .language-intro h2{margin-top:0}
.cn-notes .language-intro p{line-height:1.75}
.cn-notes .filters select#cnLanguage{border:2px solid #b9c9df;background:#fbfdff}


/* Diagram visibility and label legibility standard — Cambridge reader */
.cn-notes .diagram{overflow-x:auto;overflow-y:hidden;max-width:100%;background:#fff;padding:14px;scrollbar-width:thin}
.cn-notes .diagram figcaption{font-weight:900;color:var(--cn-navy);font-size:16px;line-height:1.5;margin:0 0 12px}
.cn-notes .diagram svg{display:block;width:100%;min-width:560px;height:auto;min-height:190px;max-height:none;overflow:visible}
.cn-notes .diagram svg text{font-family:Arial,Helvetica,sans-serif;font-size:14px;fill:#071a3d;stroke:#fff;stroke-width:.7px;stroke-linejoin:round;paint-order:stroke}
.cn-notes .diagram .diagram-note,.cn-notes .diagram p{font-size:13px;line-height:1.65;color:#334155}
.cn-notes .diagram svg [stroke]{vector-effect:non-scaling-stroke}
.cn-notes .diagram:focus-within{outline:3px solid #2563eb;outline-offset:2px}
@media(max-width:600px){.cn-notes .diagram{padding:10px}.cn-notes .diagram svg{min-width:620px;min-height:190px}.cn-notes .diagram figcaption{font-size:14px}}