.learning-note-kicker{display:block;font-size:.8rem;line-height:1.65;text-transform:uppercase;letter-spacing:.12em;color:#cfc2a3}
.learning-note-feature{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.6fr);gap:clamp(20px,3vw,44px);align-items:center;background:#0c1728;border:1px solid #30415a;border-radius:8px;overflow:hidden;margin:26px 0 36px;color:#edf3ff;text-decoration:none}
.learning-note-feature img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}.learning-note-feature-copy{display:flex;flex-direction:column;gap:10px;padding:24px 26px 24px 0;min-width:0}.learning-note-feature-copy strong{font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,2.8vw,38px);font-weight:400;line-height:1.15}.learning-note-feature-copy>span:not(.learning-note-kicker){font-size:1rem;line-height:1.6;color:#c4cfe2}.learning-note-feature-copy .learning-note-open{color:#adc9ff;font-size:.9rem;margin-top:4px}.learning-note-feature:hover{border-color:#7d9fff}.learning-note-feature:hover strong{color:#adc9ff}
.learning-note-main{padding-bottom:70px}.learning-note-breadcrumb{gap:14px;align-items:center;flex-wrap:wrap;font-size:.9rem;margin:8px 0 35px}.learning-note-heading{max-width:840px;margin-bottom:38px}.learning-note-heading h1{font-size:clamp(46px,7.5vw,96px);font-weight:500;line-height:1.06;letter-spacing:-.05em;margin-top:12px}.learning-note-heading h1 em{color:#adc9ff;white-space:nowrap}.learning-note-subtitle{font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,3vw,36px);margin-top:16px;line-height:1.3;color:#e1d0aa}.learning-note-intro{font-size:1.125rem;line-height:1.75;color:#b6c3d9;max-width:640px;margin-top:20px}.learning-note-poster{margin:0 0 55px}.learning-note-poster>a{display:block;border:1px solid #2c4157;border-radius:6px;overflow:hidden}.learning-note-poster img{display:block;width:100%;height:auto}.learning-note-poster figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:#b6c3d9;font-size:.875rem;line-height:1.6;padding-top:14px}.learning-note-poster figcaption a{color:#adc9ff;text-decoration:underline;text-underline-offset:4px}
.learning-note-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px)}.learning-note-point{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;border-top:1px solid #30415a;padding:32px 0 40px}.learning-note-number{font-family:Georgia,'Times New Roman',serif;font-size:1.5rem;line-height:1.35;color:#e1d0aa}.learning-note-point h2{font-weight:500;font-size:clamp(25px,2.4vw,32px);line-height:1.2;letter-spacing:-.025em;margin:9px 0 17px}.learning-note-body{font-size:1.125rem;line-height:1.75;color:#edf3ff}.learning-note-detail{font-size:1rem;line-height:1.7;color:#b6c3d9;margin-top:18px}.learning-note-more{display:inline-flex;align-items:center;gap:14px;font-size:.9rem;line-height:1.5;min-height:44px;color:#adc9ff;margin-top:12px}.learning-note-more:hover{text-decoration:underline;text-underline-offset:5px}.learning-note-citations a{display:inline-block;padding:7px 0;font-size:.875rem;line-height:1.5;color:#b6c3d9;text-decoration:underline;text-underline-offset:3px}.learning-note-point:last-child{grid-column:1/-1;max-width:850px}
.learning-note-journal{padding:32px 36px;background:#111e33;border-left:2px solid #9bbaff;margin:20px 0 44px}.learning-note-journal h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(26px,3vw,37px);line-height:1.25;margin:10px 0 18px}.learning-note-journal p:last-child{font-size:1.125rem;line-height:1.7;color:#c4cfe2;max-width:780px}.learning-note-original{border-top:1px solid #30415a;border-bottom:1px solid #30415a;margin:0 0 50px;padding:18px 0}.learning-note-original summary{font-size:1rem;cursor:pointer;padding:8px 0;color:#d8e5ff}.learning-note-original>p{max-width:860px;margin:18px 0 24px;color:#b6c3d9;font-size:1rem;line-height:1.7}.learning-note-original img{display:block;width:100%;height:auto}.learning-note-original a>span{display:inline-block;padding:16px 0;font-size:.9rem;color:#adc9ff}.learning-note-sources{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:45px}.learning-note-sources h2{font-size:30px;font-weight:500;line-height:1.25;margin:12px 0 18px}.learning-note-sources p{font-size:1rem;line-height:1.7;color:#b6c3d9}.learning-note-sources ol{list-style:none;margin:0;padding:0}.learning-note-sources li{padding-bottom:26px;scroll-margin-top:32px}.learning-note-sources li+li{border-top:1px solid #30415a;padding-top:24px}.learning-note-sources li>span{font-size:.8rem;line-height:1.65;color:#cfc2a3}.learning-note-sources h3{font-size:1.125rem;font-weight:500;line-height:1.55;margin:8px 0}.learning-note-sources h3 a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#536783}.learning-note-return{display:inline-flex;min-height:44px;align-items:center;font-size:1rem;color:#adc9ff;margin-top:30px}
@media(max-width:700px){.learning-note-feature{grid-template-columns:1fr;gap:0}.learning-note-feature img{max-height:280px}.learning-note-feature-copy{padding:22px}.learning-note-points{grid-template-columns:1fr}.learning-note-point{padding-block:27px 34px;gap:10px;grid-template-columns:30px minmax(0,1fr)}.learning-note-point:last-child{grid-column:auto}.learning-note-heading{margin-bottom:26px}.learning-note-heading h1{letter-spacing:-.04em}.learning-note-breadcrumb{margin-bottom:24px}.learning-note-sources{grid-template-columns:1fr;gap:28px}.learning-note-journal{padding:25px}.learning-note-poster{margin-bottom:34px}}
/* Authored visual-note collection */
.learning-note-shelf{margin:28px 0 40px}.learning-note-shelf-heading{margin-bottom:20px}.learning-note-shelf-heading h2{font-size:clamp(26px,3vw,38px);font-weight:500;letter-spacing:-.025em;margin-top:5px}.learning-note-shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.learning-note-shelf .learning-note-feature{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;height:100%}.learning-note-shelf .learning-note-feature img{aspect-ratio:3/2;object-fit:contain;max-height:none}.learning-note-shelf .learning-note-feature-copy{flex:1;padding:24px;gap:14px}.learning-note-shelf .learning-note-feature-copy strong{font-size:clamp(24px,2.3vw,32px)}.learning-note-shelf .learning-note-open{margin-top:auto;padding-top:8px}.learning-note-breadcrumb{display:flex}.learning-note-heading h1 em{white-space:normal}.learning-note-point{scroll-margin-top:30px}.learning-note-point:last-child:nth-child(even){grid-column:auto}.learning-note-citations{line-height:1.8}.learning-note-citations a{padding-block:5px}.learning-note-sources{scroll-margin-top:25px}.learning-note-sources h2{scroll-margin-top:25px}
.note-jump{display:flex;gap:12px 26px;flex-wrap:wrap;border-top:1px solid #30415a;padding:14px 0 22px;margin-bottom:8px}.note-jump a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;color:#adc9ff}.note-jump a:hover{text-decoration:underline;text-underline-offset:4px}.learning-note-page :is(a,button,summary):focus-visible{outline:2px solid #e1d0aa;outline-offset:5px}
.note-clarifications{background:#111d2c;border-left:2px solid #e1d0aa;padding:25px 30px;margin:-20px 0 50px}.note-clarifications h2{font-size:clamp(24px,2.5vw,31px);font-weight:500;line-height:1.25;margin:8px 0 16px}.note-clarifications ul{padding-left:20px;margin:0;display:grid;gap:11px;color:#c4cfe2;line-height:1.7;font-size:1rem;max-width:900px}
.note-diagram{margin:55px 0 60px;padding:clamp(24px,3.5vw,44px);background:radial-gradient(ellipse at 80% 5%,#182842 0,transparent 60%),#0d1727;border:1px solid #30415a;border-radius:8px;scroll-margin-top:24px;overflow:hidden}.note-diagram>h2{font-size:clamp(32px,4vw,51px);font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:10px 0 25px}.note-diagram h2 em{color:#adc9ff}.note-diagram-intro{font-size:1rem;line-height:1.7;color:#b6c3d9;max-width:750px;margin-bottom:28px}.note-family{max-width:760px;margin:30px auto}.note-family>div{border:1px solid #5d7998;background:#112237;border-radius:10px;padding:19px 24px}.note-family div>div{margin-top:16px;border:1px solid #5d7998;border-radius:8px;padding:18px 22px;background:#193149}.note-family div>div>div{background:#263b49;border-color:#aa986f}.note-family span{display:block;font-size:1.2rem;font-weight:600;line-height:1.5;color:#eef2fa}.note-family small{font-size:.9rem;line-height:1.6;color:#c4cfe2}.note-axes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:38px}.note-axes article{border-top:1px solid #516078;padding-top:23px}.note-axes h3{font-size:1.3rem;font-weight:500;line-height:1.3;margin:8px 0 12px}.note-axes p{color:#b6c3d9;font-size:1rem;line-height:1.7}.note-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.note-tags span{font-size:.8rem;line-height:1.5;border:1px solid #354b65;border-radius:4px;padding:5px 9px;color:#cbdaf0}.note-example{margin-top:30px;padding:25px 28px;background:#16253a;border-radius:6px}.note-example p{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px;line-height:1.7;font-size:1rem}.note-example strong{font-weight:500;color:#eef2fa}.note-example small{font-size:.9rem;line-height:1.7;color:#b6c3d9}
.token-context{background:#080f1b;padding:24px 28px;border:1px solid #344962;border-radius:8px}.token-context>p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,3.3vw,39px);line-height:1.65;margin-top:10px;min-height:65px;color:#edf3ff}.token-added{color:#e1d0aa;white-space:pre-wrap;animation:note-token-in .35s ease-out both}.token-cursor{display:inline-block;width:2px;height:1em;background:#e1d0aa;vertical-align:-.08em;margin-left:6px}.token-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:28px 0 20px;gap:15px}.token-flow li{position:relative;border-top:2px solid #7194c7;background:#132139;border-radius:2px;padding:18px 16px 22px}.token-flow li>span{display:block;font-family:Georgia,serif;font-size:1.35rem;color:#e1d0aa;margin-bottom:14px}.token-flow strong{display:block;font-size:1rem;font-weight:500;line-height:1.45;margin-bottom:9px}.token-flow small{display:block;font-size:.85rem;line-height:1.7;color:#b6c3d9}.token-flow li+li:before{content:'→';position:absolute;left:-14px;top:17px;color:#adc9ff}.token-loop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:18px 22px;border:1px solid #405875;border-top:0;border-radius:0 0 14px 14px;color:#adc9ff;font-size:.95rem;line-height:1.6}.token-loop>span{font-size:2rem}.token-loop strong{margin-left:auto;font-weight:500;color:#e1d0aa}.token-demo-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:25px}.token-demo-controls[hidden]{display:none}.token-demo-controls button{border:1px solid #93b8ed;background:#b4cef5;color:#0c1728;border-radius:5px;padding:12px 18px;min-height:48px;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer}.token-demo-controls .note-reset{background:transparent;color:#bfd5f5;border-color:#405875}.token-demo-controls button:disabled{opacity:.5;cursor:default}.token-demo-controls p{flex-basis:100%;font-size:.95rem;line-height:1.7;color:#c4cfe2;margin-top:6px;min-height:3.4em}.token-example-complete{color:#b6c3d9;font-size:.875rem;line-height:1.8;margin-top:22px}.note-related{display:grid;gap:0;border-top:1px solid #30415a;padding-top:27px;margin-top:35px}.note-related a{display:flex;justify-content:space-between;gap:15px;font-size:clamp(22px,2vw,28px);line-height:1.4;padding:18px 0;border-bottom:1px solid #30415a;color:#d8e5ff}.note-related a:hover{color:#adc9ff}@keyframes note-token-in{from{opacity:0}to{opacity:1}}
@media(max-width:900px){.learning-note-shelf-grid{gap:14px}.learning-note-shelf .learning-note-feature-copy{padding:19px}.note-axes{grid-template-columns:1fr;gap:25px}.token-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.token-flow li+li:before{display:none}.token-loop strong{margin-left:0}}
@media(max-width:650px){.learning-note-shelf-grid{grid-template-columns:1fr}.learning-note-shelf .learning-note-feature-copy{padding:22px}.learning-note-shelf .learning-note-feature-copy strong{font-size:29px}.note-jump{gap:5px 20px}.note-clarifications{padding:23px;margin-bottom:35px}.note-diagram{padding:23px 19px;margin:35px 0}.note-family>div,.note-family div>div{padding:15px}.note-family small{font-size:.8rem}.note-example{padding:21px}.note-example p{display:block}.note-example p>span{display:block}.token-context{padding:20px}.token-flow{gap:12px}.token-flow li{padding:15px 12px}.token-flow strong{font-size:.94rem}.token-flow small{font-size:.81rem}.token-demo-controls{gap:10px}.token-demo-controls p{min-height:5.1em}}
@media(prefers-reduced-motion:reduce){.token-added{animation:none}}
/* Four visual notes and the media comparison */
.learning-note-shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.note-modalities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}.note-modalities article{padding:25px 23px;background:#122238;border:1px solid #344b68;border-top:3px solid #8baddc;border-radius:6px}.note-modalities article:nth-child(2){border-top-color:#d9c394}.note-modalities article:nth-child(3){border-top-color:#b5a7df}.note-modalities h3{font-size:clamp(27px,3vw,36px);font-weight:500;line-height:1.2;letter-spacing:-.03em;margin:10px 0 25px}.note-modalities article>div{padding:17px 0;border-top:1px solid #344b68}.note-modalities article>div>span{font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:#b5c5dc}.note-modalities article>div>p{font-size:1rem;line-height:1.7;margin-top:6px;color:#edf3ff}.note-modalities .note-modality-process p{color:#e1d0aa}.note-modality-detail,.note-generation-limit{font-size:.95rem;line-height:1.8;color:#b6c3d9}.note-modality-detail{margin-top:12px}.note-generation-limit{border-top:1px solid #344b68;padding-top:24px;margin-top:28px;max-width:850px}
@media(min-width:1150px){.learning-note-shelf-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.learning-note-shelf .learning-note-feature-copy{padding:22px 20px}.learning-note-shelf .learning-note-feature-copy strong{font-size:27px}}
@media(max-width:800px){.note-modalities{grid-template-columns:1fr}.note-modalities article{padding:23px}.note-modalities h3{margin-bottom:20px}}
@media(max-width:650px){.learning-note-shelf-grid{grid-template-columns:1fr}}