:root{--bg:#fff;--fg:#0f172a;--fg2:#334155;--mut:#5b6b80;--line:#e2e8f0;--line2:#cbd5e1;--card:#f8fafc;--pri:#155eef;--pri-h:#0b4ad6;--pril:#e8f0ff;--code:#f1f5f9;--ring:#2970ff;--banner:#155eef;--navbg:rgba(255,255,255,.78);
--ease:cubic-bezier(.23,1,.32,1);--r:12px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px}
@media(prefers-color-scheme:dark){:root{--bg:#020617;--fg:#e2e8f0;--fg2:#cbd5e1;--mut:#94a3b8;--line:#1e293b;--line2:#334155;--card:#0b1324;--pri:#7aa7ff;--pri-h:#a3c2ff;--pril:#13213f;--code:#0f1a2e;--ring:#7aa7ff;--banner:#1d4ed8;--navbg:rgba(2,6,23,.72)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 Geist,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-feature-settings:"cv11","ss01"}
img,video,iframe{max-width:100%}img{height:auto}
a{color:var(--pri);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
@media(hover:hover){a:hover{text-decoration:underline}}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:8px}.skip:focus-visible{top:12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s5)}
/* banner */
.banner{display:flex;justify-content:center;align-items:center;min-height:40px;background:var(--banner);color:#fff;font-size:14px;font-weight:500;padding:0 52px;position:relative;text-align:center}
.banner button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:40px;display:grid;place-items:center;background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;border-radius:8px;opacity:.85;transition:opacity 150ms var(--ease),transform 160ms var(--ease)}
.banner button:hover{opacity:1}.banner button:active{transform:translateY(-50%) scale(.94)}.banner button:focus-visible{outline-color:#fff}
/* nav */
.nav{position:sticky;top:0;z-index:10;background:var(--navbg);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:var(--s4)}
.logo{display:flex;align-items:center;min-height:44px;border-radius:8px}.logo img{display:block;height:28px;width:auto}
.nav nav{display:flex;gap:2px}
.nav nav a{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;color:var(--fg2);font-size:15px;font-weight:500;white-space:nowrap;transition:background-color 150ms var(--ease),color 150ms var(--ease)}
@media(hover:hover){.nav nav a:hover{background:var(--card);color:var(--fg);text-decoration:none}}
.nav nav a[aria-current=page]{color:var(--fg);background:var(--card)}
@media(max-width:760px){.wrap{padding:0 var(--s4)}.nav .wrap{flex-wrap:wrap;gap:0;padding-top:6px}
.nav nav{order:2;width:calc(100% + 32px);margin:0 -16px;padding:0 10px 6px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.nav nav::-webkit-scrollbar{display:none}.nav nav a{min-height:44px;font-size:15px}}
/* type */
main.wrap{padding-top:var(--s7,48px);padding-bottom:var(--s8,64px)}footer{margin-top:var(--s6,32px)}
h1,h2,h3{color:var(--fg);text-wrap:balance}
h1{font-size:clamp(30px,4.2vw,44px);line-height:1.12;letter-spacing:-.025em;margin:var(--s2) 0 var(--s3);font-weight:700}
h2{font-size:clamp(20px,2.2vw,24px);line-height:1.25;letter-spacing:-.015em;margin:var(--s7) 0 var(--s4);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);font-weight:650}
h2 a{font-size:14px;font-weight:500;white-space:nowrap}
.lede{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:var(--mut);margin:0 0 var(--s5);max-width:62ch;text-wrap:pretty}
.kicker{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0}.kicker a{color:inherit}
/* grids & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s4)}
.card{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);background:var(--card);color:var(--fg);transition:border-color 150ms var(--ease),transform 160ms var(--ease),box-shadow 200ms var(--ease)}
@media(hover:hover) and (pointer:fine){.card:hover{border-color:var(--line2);box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.18);text-decoration:none}}
.card:active{transform:scale(.98)}
.card img{width:48px;height:48px;aspect-ratio:1;object-fit:cover;border-radius:10px;flex:none;background:var(--line)}
.card h3{font-size:16px;line-height:1.35;margin:0 0 var(--s1);font-weight:600;letter-spacing:-.005em}
.card p{margin:0;color:var(--mut);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card[hidden]{display:none}
/* article */
.post{max-width:68ch;margin:0 auto}
.rich{font-size:17px;line-height:1.72;color:var(--fg2);overflow-wrap:break-word}
.rich a{overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--pri) 40%,transparent)}
.rich p,.rich ul,.rich ol{margin:0 0 1.1em}.rich li{margin:.3em 0}.rich li>p{margin:0}
.rich h2{font-size:24px;margin:2em 0 .6em}.rich h3{font-size:20px;line-height:1.3;margin:1.8em 0 .5em;letter-spacing:-.01em}.rich h4{font-size:17px;margin:1.6em 0 .4em}
.rich strong{color:var(--fg)}
.rich img,.hero{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--card)}.hero{margin:var(--s5) 0}
.rich figure{margin:1.6em 0;max-width:100%!important}.rich figure>div{max-width:100%}.rich figcaption{font-size:14px;color:var(--mut);margin-top:var(--s2);text-align:center}
.rich pre{background:var(--code);border:1px solid var(--line);border-radius:10px;padding:var(--s4);overflow-x:auto;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;white-space:pre}
.rich code{background:var(--code);border-radius:5px;padding:.1em .35em;font:.88em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}.rich pre code{background:none;padding:0;overflow-wrap:normal}
.rich blockquote{border-left:3px solid var(--pri);margin:1.4em 0;padding:.2em 0 .2em 1em;color:var(--mut)}
.rich iframe{width:100%;border:0;border-radius:10px}.rich iframe[src*=embedly],.rich iframe[src*=youtube]{aspect-ratio:16/9;height:auto}
.rich table{border-collapse:collapse;display:block;max-width:100%;overflow-x:auto;font-size:15px}.rich td,.rich th{border:1px solid var(--line);padding:8px 12px;vertical-align:top}
.rich [data-rt-embed-type] img[referrerpolicy]{width:24px;height:24px;border:0;display:inline-block;margin-right:4px;border-radius:6px}
.rich hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0;font-size:14px}.meta span{color:var(--mut);min-width:84px}
.post>.meta:last-of-type{margin-bottom:var(--s6)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;min-height:32px;border:1px solid var(--line);border-radius:999px;padding:0 12px;font-size:13px;color:var(--fg2);background:var(--card);transition:border-color 150ms var(--ease),transform 160ms var(--ease)}
@media(hover:hover){.chip:hover{border-color:var(--line2);text-decoration:none;color:var(--fg)}}.chip:active{transform:scale(.97)}
.head{display:flex;gap:var(--s5);align-items:center;margin-bottom:var(--s4)}.icon{width:72px;height:72px;border-radius:16px;object-fit:cover;border:1px solid var(--line);flex:none}
.btn{display:inline-flex;align-items:center;min-height:44px;background:var(--pri);color:#fff;padding:0 18px;border-radius:10px;font-weight:600;font-size:15px;margin-top:var(--s2);transition:background-color 150ms var(--ease),transform 160ms var(--ease)}
@media(prefers-color-scheme:dark){.btn{color:#020617}}
@media(hover:hover){.btn:hover{background:var(--pri-h);text-decoration:none}}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--pri);border:1px solid currentColor}
/* inputs */
.filter{display:block;width:100%;max-width:560px;min-height:46px;padding:0 16px;border:1px solid var(--line2);border-radius:12px;background:var(--bg);color:var(--fg);font:inherit;font-size:16px;margin:0 0 var(--s5);transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease);-webkit-appearance:none;appearance:none}
.filter::placeholder{color:var(--mut)}
.filter:focus-visible{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 25%,transparent)}
.empty{color:var(--mut);font-size:15px;margin:0 0 var(--s4)}
.lessons{padding-left:1.4em;max-width:68ch}.lessons li{margin:var(--s3) 0;padding-left:4px}.lessons span{display:block;color:var(--mut);font-size:14px}
.list{max-width:760px}.list a{display:block;padding:var(--s3) var(--s3);margin:0 calc(-1*var(--s3));border-radius:10px;color:var(--fg);transition:background-color 120ms var(--ease)}
@media(hover:hover){.list a:hover{background:var(--card);text-decoration:none}}.list a:active{transform:scale(.99)}
.list b{font-weight:600}.list span{display:block;color:var(--mut);font-size:14px;margin-top:2px}.list em{font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-right:6px}
.video{position:relative;aspect-ratio:16/9;margin:var(--s5) 0;border-radius:12px;overflow:hidden;background:var(--card)}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.expert{display:flex;align-items:center;gap:10px;color:var(--mut)}.expert img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.hero-home{padding:var(--s5) 0 0}.hero-home h1{font-size:clamp(34px,5vw,52px)}
.notfound{max-width:640px;padding:var(--s7) 0}
details{margin:var(--s5) 0;border:1px solid var(--line);border-radius:12px;padding:var(--s3) var(--s4)}summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
footer{border-top:1px solid var(--line);padding:var(--s6) 0;color:var(--mut);font-size:14px}footer .wrap>div{display:flex;flex-wrap:wrap;gap:4px 8px;margin-left:-8px}footer a{color:var(--mut);display:inline-flex;align-items:center;min-height:40px;padding:0 8px;border-radius:6px}footer p{margin:var(--s3) 0 0}
.beehiiv{color:var(--fg2)}.beehiiv *{max-width:100%}.beehiiv table{display:table}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}.card:active,.btn:active,.chip:active{transform:none}}
.meta+.rich,.meta+h2{margin-top:var(--s6)}@media(max-width:760px){.banner{font-size:13px;padding:6px 48px}}