* { box-sizing:border-box; }
body { margin:0; background:oklch(0.15 0.015 258); color:oklch(0.96 0.01 85); font-family:'Manrope',sans-serif; }
a { color:oklch(0.78 0.143 86); text-decoration:none; } a:hover { color:oklch(0.86 0.121 86); }
h1,h2 { font-family:'Playfair Display',serif; letter-spacing:-.015em; }
.learn-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px max(24px,calc((100vw - 820px)/2)); background:oklch(0.15 0.015 258 / .9); backdrop-filter:blur(12px); border-bottom:1px solid oklch(0.32 0.018 258 / .4); font-size:14px; }
.learn-header > a:first-child { color:inherit; font-weight:800; font-size:17px; } .learn-header nav { display:flex; gap:22px; } .learn-header nav a { color:oklch(0.75 0.012 258); }
.learn-subscribe { background:oklch(0.78 0.143 86); color:oklch(0.16 0.024 258); font-weight:700; padding:10px 16px; border-radius:6px; white-space:nowrap; }
.learn-shell { max-width:760px; margin:0 auto; padding:64px 24px 80px; } .learn-kicker { color:oklch(0.78 0.143 86); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; } .learn-shell h1 { font-size:42px; line-height:1.1; margin:0 0 16px; } .learn-dek { color:oklch(0.7 0.012 258); font-size:18px; line-height:1.65; margin:0 0 42px; }
.learn-copy { font-size:16.5px; line-height:1.82; color:oklch(0.86 0.009 258); } .learn-copy p { margin:0 0 24px; }
.learn-note,.learn-related { margin-top:34px; padding:20px 22px; border:1px solid oklch(0.32 0.018 258 / .6); border-radius:12px; background:oklch(0.18 0.015 258); font-size:14px; line-height:1.7; color:oklch(0.72 0.012 258); } .learn-related strong { display:block; color:oklch(0.96 0.01 85); margin-bottom:8px; } .learn-related a { margin-right:10px; }
.learn-back { margin-top:44px; padding-top:28px; border-top:1px solid oklch(0.28 0.018 258 / .5); font-size:14px; } footer { border-top:1px solid oklch(0.28 0.018 258 / .4); padding:30px 24px; text-align:center; font-size:13px; color:oklch(0.6 0.012 258); }
@media (max-width:700px) { .learn-header nav { display:none; } .learn-shell h1 { font-size:34px; } .learn-dek { font-size:16px; } }
.learn-index-group { margin:38px 0; padding-top:26px; border-top:1px solid oklch(0.28 0.018 258 / .5); } .learn-index-group h2 { margin:0 0 8px; font-size:25px; } .learn-index-group p { color:oklch(0.68 0.012 258); margin:0 0 18px; line-height:1.6; } .learn-index-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .learn-index-grid a { display:block; padding:14px 16px; border:1px solid oklch(0.32 0.018 258 / .6); border-radius:8px; background:oklch(0.18 0.015 258); font-weight:600; } @media (max-width:520px) { .learn-index-grid { grid-template-columns:1fr; } }