@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-700.woff2") format("woff2");}
:root{--ink:#17233b;--muted:#5a6a82;--card:rgba(255,255,255,.57);--edge:rgba(255,255,255,.90);--font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);font:16px/1.42 var(--font-sans);background:#f3f6fa}
a{color:inherit}
:focus-visible{outline:2px solid #4a6fa8;outline-offset:3px;border-radius:6px}

.aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(54px);opacity:.62;animation:drift 16s ease-in-out infinite alternate}
.blue{width:520px;height:520px;left:-180px;top:-245px;background:#94ceff}
.violet{width:490px;height:490px;right:-170px;top:38px;background:#ddbdff;animation-delay:-5s}
.mint{width:530px;height:430px;left:30%;bottom:-295px;background:#9ef0d8;animation-delay:-10s}
.peach{width:290px;height:290px;right:22%;bottom:-140px;background:#ffd3a4;animation-delay:-2s}
@keyframes drift{to{transform:translate(64px,34px) scale(1.13)}}

.page{width:min(1200px,calc(100% - 44px));position:relative;margin:auto;padding:43px 0 45px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:29px}
.id{display:flex;align-items:center;gap:10px;color:#4c5a72;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.id .mark{display:grid;place-items:center;width:31px;height:31px;border-radius:11px;background:#1b2a49;flex:none;text-decoration:none;transition:background .2s ease}
.id .mark:hover{background:#2b4070}
.id .mark svg{display:block;width:21px;height:21px}
.edition{border:1px solid rgba(115,129,155,.18);background:rgba(255,255,255,.43);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:10px 14px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;color:#5c6c83;white-space:nowrap}

h1{margin:18px 0 0;font-size:clamp(37px,5.4vw,69px);line-height:.96;letter-spacing:-.065em}
.accent{background:linear-gradient(110deg,#477dc0,#8871d6 58%,#4aa88c);-webkit-background-clip:text;background-clip:text;color:#4d72b4;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .accent{color:#4d72b4;-webkit-text-fill-color:currentColor}
}
.glass{background:var(--card);border:1px solid var(--edge);box-shadow:0 22px 60px rgba(58,78,114,.10),inset 0 1px 0 rgba(255,255,255,.8);-webkit-backdrop-filter:blur(23px) saturate(140%);backdrop-filter:blur(23px) saturate(140%)}

.rule{display:grid;grid-template-columns:172px 1fr auto;align-items:center;gap:22px;margin:30px 0 17px;padding:20px 24px;border-radius:25px}
.rule .label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#456d94}
.rule p{margin:0;font-size:19px;line-height:1.22;letter-spacing:-.025em;font-weight:700}
.core{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#74bafa,#8874dc);font-size:19px;box-shadow:0 8px 20px rgba(93,117,205,.24)}

.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.lane{position:relative;min-height:307px;padding:21px 21px 26px;border-radius:25px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.lane:hover{transform:translateY(-8px);box-shadow:0 30px 55px rgba(58,78,114,.18)}
.lane:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-78px;bottom:-80px;background:var(--c);opacity:.22;filter:blur(17px)}
.lane-work{--c:#64baf0;--dark:#1d5f8a}
.lane-build{--c:#b18ae8;--dark:#5f3e93}
.lane-research{--c:#62cfae;--dark:#15684f}
.lane-personal{--c:#f3ad78;--dark:#94522a}
.kicker{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--dark)}
.icon{display:grid;place-items:center;width:55px;height:55px;border-radius:18px;margin:28px 0 22px;background:var(--c);background:color-mix(in srgb,var(--c),white 62%);color:var(--dark);font-size:23px;font-weight:700}
.lane h2{margin:0 0 9px;font-size:23px;letter-spacing:-.04em}
.lane p{margin:0;color:var(--muted);font-size:13.5px;max-width:32ch}
.lane small{margin-top:auto;padding-top:18px;color:#3a4a62;font-size:12px;font-weight:700}
.lane small:before{content:"";display:inline-block;width:6px;height:6px;background:var(--c);border-radius:50%;margin:0 7px 1px 0}
.lane .bar{position:absolute;bottom:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,var(--c),transparent 88%)}

.lower{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:17px}
.boundary,.principles{border-radius:23px;padding:19px 22px}
.overline{display:block;margin-bottom:9px;color:#59697f;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.boundary p{margin:0;font-size:14px;font-weight:700;color:#3a4a62}
.principles{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.principles span{font-size:11px;font-weight:700;color:#4a5a72;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.92);padding:8px 10px;border-radius:999px}

@media(max-width:850px){.lanes{grid-template-columns:repeat(2,1fr)}.lower{grid-template-columns:1fr}.lane{min-height:250px}}
@media(max-width:520px){.page{width:min(100% - 26px,1200px);padding-top:25px}.top{margin-bottom:10px}.edition{display:none}.rule{grid-template-columns:1fr 48px;gap:10px;padding:18px}.rule .label{grid-column:1/-1}.rule p{font-size:17px}.lanes{grid-template-columns:1fr}.lane{min-height:235px}}

@media (prefers-reduced-motion: reduce){
  .blob{animation:none}
  .lane{transition:none}
  .lane:hover{transform:none}
  *{scroll-behavior:auto}
}