.note-header { display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:24px; gap:20px; }
.note-back { color:var(--muted); border-bottom:1px solid var(--line); font-size:.84rem; font-weight:700; }
.note-back:hover { color:var(--accent); border-color:var(--accent); }
.note-page { max-width:800px; margin:0 auto; padding:105px 24px 90px; }
.note-label { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.note-page h1 { max-width:760px; margin-top:16px; font-size:clamp(3.25rem,7vw,6.4rem); }
.note-intro { max-width:690px; margin-top:28px; color:var(--muted); font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(1.1rem,2vw,1.42rem); line-height:1.55; }
.note-article { max-width:680px; margin-top:70px; }
.note-article h2 { margin-top:52px; font-size:clamp(1.7rem,3.5vw,2.45rem); }
.note-article p { margin-top:16px; color:var(--muted); font-size:1rem; line-height:1.8; }
.note-article ul { margin:18px 0 0 20px; color:var(--muted); }
.note-article li { margin:9px 0; padding-left:4px; line-height:1.7; }
.note-callout { margin-top:32px; padding:22px 24px; border-left:2px solid var(--accent); background:rgba(30,62,108,.24); }
.note-callout p { margin:0; color:#dce6fc; }
.note-footer { max-width:680px; margin-top:72px; padding-top:28px; border-top:1px solid var(--line); }
.note-footer a { color:var(--accent); border-bottom:1px solid currentColor; font-weight:700; }
@media (max-width:760px) { .note-grid { grid-template-columns:1fr; }.note-card { min-height:0; padding:24px; }.note-header { padding:18px; }.note-page { padding:70px 18px 65px; }.note-article { margin-top:54px; }.note-article h2 { margin-top:42px; } }